/* ==========================================================================
   Mu Rings - VISUAL NOVO (estilo landing moderna de MU)
   ==========================================================================
   Referencia de estilo: os sites de MU atuais (cabecalho de vidro fixo, hero
   com titulo gigante em degrade laranja, paineis azul-noite com canto de 20px,
   botao em pilula com brilho magenta no canto, fonte Montserrat 800). Nenhuma
   imagem, texto ou fonte de terceiros: so os valores de estilo.

   So carrega com MR_DREAM ligado (templates/default/index.php), e TUDO aqui e
   preso em body.mr-dream. Entra depois do viking.css; o override.css usa
   !important em muita coisa, por isso varias regras daqui tambem usam.

   Os dois personagens do fundo (.mr-cavaleiro, .mr-slayer e as camadas deles)
   continuam como estao - so ganham um veu para o texto do hero ler bem.
   ========================================================================== */

body.mr-dream {
	--dr-fundo:     #030c14;
	--dr-caixa:     #051f35;
	--dr-caixa-2:   #0a2a49;
	--dr-borda:     rgba(255,255,255,.10);
	--dr-borda-luz: rgba(255,255,255,.22);
	--dr-texto:     #e8eef6;
	--dr-apagado:   #9fb0c4;
	--dr-laranja:   #ff9533;
	--dr-ouro-a:    #ffc300;
	--dr-ouro-b:    #ff7b00;
	--dr-amarelo:   #ffd600;
	--dr-azul:      #0083e7;
	--dr-verde:     #00ff55;
	--dr-fonte:     "Montserrat", "Segoe UI", Arial, sans-serif;

	background: var(--dr-fundo) !important;
	background-image:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(1,45,107,.35), transparent 70%),
		linear-gradient(180deg, #04101c 0%, var(--dr-fundo) 60%) !important;
	background-attachment: fixed !important;
	color: var(--dr-texto);
	font-family: var(--dr-fonte);
	font-weight: 500;
}
body.mr-dream a { color: #ffd38a; }
body.mr-dream a:hover { color: #fff !important; }

/* Veu sobre a arte: o mesmo truque da referencia - uma elipse escura e borrada
   atras do miolo da pagina, que da contraste sem apagar os personagens dos lados. */
body.mr-dream .mr-fundo::after {
	content: "";
	position: absolute;
	left: 50%; top: 40px;
	width: 1100px; height: 900px;
	margin-left: -550px;
	border-radius: 50%;
	background: rgba(3,12,20,.78);
	filter: blur(120px);
	pointer-events: none;
}

/* ------------------------------------------------------------ faixa de beta */
body.mr-dream .mr-beta-aviso {
	font-family: var(--dr-fonte);
	font-size: 13px;
	padding: 7px 16px;
	background: linear-gradient(90deg, #7a1d06, #c94a07 50%, #7a1d06);
	border-bottom: 0;
	box-shadow: none;
}
body.mr-dream .mr-beta-aviso strong { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #ffe46b; }
body.mr-dream .mr-beta-aviso span { font-size: 13px; }

/* ================================================================ CABECALHO */
.dr-header {
	position: sticky;
	top: 0;
	z-index: 500;
	height: 70px;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
	font-family: var(--dr-fonte);
}
/* o vidro fica num ::before para o blur nao recortar os menus que descem */
.dr-header::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background: radial-gradient(800% 141% at 0% 0%, rgba(1,45,107,.55) 0%, rgba(11,51,107,.82) 100%);
	-webkit-backdrop-filter: blur(24px);
	        backdrop-filter: blur(24px);
	border-bottom: 1px solid rgba(255,255,255,.06);
	transition: box-shadow .3s;
}
.dr-header.rolou::before { box-shadow: 0 8px 32px rgba(0,0,0,.45); }

.dr-logo { position: relative; display: block; flex: 0 0 auto; transition: transform .25s; }
.dr-logo img { display: block; width: auto; height: 58px; }
.dr-logo::after {
	content: "";
	position: absolute; inset: 15%;
	border-radius: 50%;
	background: var(--dr-laranja);
	filter: blur(14px);
	opacity: 0;
	z-index: -1;
	transition: opacity .3s;
}
.dr-logo:hover { transform: scale(1.08); }
.dr-logo:hover::after { opacity: .5; }

.dr-servidor {
	display: flex; flex-direction: column; justify-content: center;
	min-width: 150px; line-height: 1.15;
	padding-left: 18px;
	border-left: 1px solid rgba(255,255,255,.1);
}
.dr-servidor small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-amarelo); }
.dr-servidor b { font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase; }
.dr-servidor-online { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; }

.dr-ponto {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	background: var(--dr-verde);
	box-shadow: 0 0 6px rgba(51,255,0,.5), 0 0 12px rgba(51,255,0,.4);
	animation: dr-pisca 2s ease-in-out infinite;
}
@keyframes dr-pisca { 50% { opacity: .45; } }

.dr-barra { display: inline-block; width: 70px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.dr-barra span { display: block; height: 100%; border-radius: 4px; background: var(--dr-verde); box-shadow: 0 0 6px rgba(51,255,0,.16), 0 0 12px rgba(51,255,0,.36); }

/* ---------------------------------------------------------------- menu */
.dr-nav { flex: 1 1 auto; display: flex; justify-content: center; height: 100%; }
.dr-nav > ul { display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; }
.dr-nav > ul > li { position: relative; display: flex; }

.dr-link {
	position: relative;
	display: flex; align-items: center; gap: 7px;
	height: 100%;
	padding: 0 13px;
	background: none; border: 0;
	font-family: var(--dr-fonte);
	font-size: 13px; font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff !important;
	opacity: .82;
	transition: opacity .25s;
	cursor: pointer;
}
.dr-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.dr-link i { font-style: normal; font-size: 9px; opacity: .7; }
.dr-link:hover, .dr-link.ativo { opacity: 1; text-decoration: none; }

/* sublinhado laranja com brilho, que cresce do centro */
.dr-link::after {
	content: "";
	position: absolute; left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 0; height: 2px;
	border-radius: 0 0 64px 64px;
	background: var(--dr-laranja);
	transition: width .3s, box-shadow .3s;
}
.dr-link::before {
	content: "";
	position: absolute; left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 80%; height: 0;
	background: var(--dr-laranja);
	opacity: .35;
	filter: blur(18px);
	transition: height .3s;
	pointer-events: none;
}
.dr-link:hover::after, .dr-link.ativo::after { width: 100%; box-shadow: 0 0 6px var(--dr-laranja); }
.dr-link:hover::before, .dr-link.ativo::before { height: 60%; }

/* "Mais": abre com grid-template-rows 0fr -> 1fr, sem altura fixa */
.dr-mais-menu {
	position: absolute; top: 100%; right: 0;
	display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr));
	gap: 2px;
	min-width: 320px;
	margin: 0; padding: 10px;
	list-style: none;
	background: var(--dr-caixa);
	border: 1px solid var(--dr-borda);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 18px 40px rgba(0,0,0,.55);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.dr-mais:hover .dr-mais-menu,
.dr-mais.aberto .dr-mais-menu { opacity: 1; visibility: visible; transform: none; }
.dr-mais-menu a {
	display: block; padding: 9px 12px; border-radius: 8px;
	font-size: 13px; font-weight: 600; color: #dfe7f1 !important;
	text-transform: uppercase; letter-spacing: .02em;
}
.dr-mais-menu a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.dr-mais-menu a.ativo { background: rgba(255,149,51,.16); color: #fff !important; }

/* ---------------------------------------------------------- acoes (direita) */
.dr-acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
body.mr-dream .dr-acoes .mr-lang-btn {
	height: 32px; padding: 0 10px; border-radius: 16px;
	background: rgba(255,255,255,.08);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
	color: #fff; font-weight: 700;
}
body.mr-dream .dr-acoes .mr-lang-menu { left: auto; right: 0; top: calc(100% + 10px); background: var(--dr-caixa); border-color: var(--dr-borda); border-radius: 12px; }

/* ================================================================ BOTOES
   Pilula com cor chapada + um radial magenta no canto de baixo e o par de
   sombras internas (luz em cima, sombra embaixo) que da volume. */
.dr-btn,
body.mr-dream .btn,
body.mr-dream input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 25px !important;
	font-family: var(--dr-fonte) !important;
	font-size: 14px !important; font-weight: 700 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	white-space: nowrap;
	transition: background .2s ease-in-out, transform .2s, box-shadow .2s !important;
}
body.mr-dream .btn-xs { height: 26px; padding: 0 12px !important; font-size: 11px !important; }
body.mr-dream .btn-sm { height: 34px; padding: 0 16px !important; font-size: 12px !important; }
.dr-btn:hover, body.mr-dream .btn:hover { text-decoration: none; transform: translateY(-1px); }

.dr-btn-azul,
body.mr-dream .btn-default,
body.mr-dream .btn-info {
	background: radial-gradient(422% 145% at 100% 157%, rgba(210,0,120,.5) 0, rgba(210,0,120,0) 100%), var(--dr-azul) !important;
	color: #fff !important;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.3), inset 0 -2px 2px rgba(9,34,57,.3), 0 5px 10px rgba(0,131,231,.25), 0 10px 20px rgba(0,131,231,.1) !important;
}
.dr-btn-azul:hover,
body.mr-dream .btn-default:hover,
body.mr-dream .btn-info:hover {
	background: radial-gradient(422% 145% at 100% 157%, rgba(251,21,151,.5) 0, rgba(251,21,151,0) 100%), #1498f8 !important;
}

.dr-btn-amarelo,
body.mr-dream .btn-primary,
body.mr-dream .btn-warning,
body.mr-dream input[type="submit"] {
	background: radial-gradient(140% 418% at 100% 157%, rgba(210,0,120,.45) 0, rgba(210,0,120,0) 100%), var(--dr-amarelo) !important;
	color: #1a1206 !important;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.3), inset 0 -2px 2px rgba(9,34,57,.3), 0 5px 20px rgba(243,164,29,.25), 0 10px 20px rgba(243,164,29,.1) !important;
}
.dr-btn-amarelo:hover,
body.mr-dream .btn-primary:hover,
body.mr-dream .btn-warning:hover,
body.mr-dream input[type="submit"]:hover {
	background: radial-gradient(140% 418% at 100% 157%, rgba(251,21,151,.5) 0, rgba(251,21,151,0) 100%), #ffe14d !important;
	color: #1a1206 !important;
}

body.mr-dream .btn-success {
	background: radial-gradient(140% 418% at 100% 157%, rgba(0,120,210,.4) 0, rgba(0,120,210,0) 100%), #3fb950 !important;
	color: #fff !important;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.3), inset 0 -2px 2px rgba(9,34,57,.3), 0 5px 14px rgba(63,185,80,.25) !important;
}
body.mr-dream .btn-danger {
	background: radial-gradient(140% 418% at 100% 157%, rgba(120,0,210,.4) 0, rgba(120,0,210,0) 100%), #e5352b !important;
	color: #fff !important;
	box-shadow: inset 0 2px 2px rgba(255,255,255,.3), inset 0 -2px 2px rgba(9,34,57,.3), 0 5px 14px rgba(229,53,43,.3) !important;
}

.dr-btn-contorno {
	background: transparent !important;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.5) !important;
}
.dr-btn-contorno:hover { background: #fff !important; color: #0d0d10 !important; }
.dr-btn-grande { height: 54px; padding: 0 34px !important; font-size: 17px !important; letter-spacing: .04em !important; }

/* ================================================================ MIOLO
   A coluna deixa de ser uma chapa unica: fica transparente e os paineis viram
   cartoes de vidro soltos, entao os personagens aparecem entre eles. */
body.mr-dream #container {
	width: 100%;
	max-width: 1200px !important;
	margin: 0 auto;
	padding: 0 16px 40px;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
body.mr-dream #content::before { display: none; }
body.mr-dream #content { padding-top: 24px; }

body.mr-dream h1, body.mr-dream h2, body.mr-dream h3, body.mr-dream h4, body.mr-dream h5 {
	font-family: var(--dr-fonte);
	text-shadow: none;
	color: #fff;
}

/* titulo de pagina: 800, caixa alta, com o brilho laranja embaixo */
body.mr-dream .page-title,
body.mr-dream #content h1,
body.mr-dream .mk-titulo {
	font-family: var(--dr-fonte) !important;
	font-weight: 800 !important;
	font-size: clamp(28px, 4.4vw, 50px) !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-align: center;
	margin: 10px 0 26px !important;
}
body.mr-dream .page-title::after {
	width: 140px !important; height: 2px !important;
	margin: 16px auto 0 !important;
	background: linear-gradient(90deg, transparent, var(--dr-laranja) 50%, transparent) !important;
	box-shadow: 0 0 12px rgba(255,149,51,.6) !important;
	-webkit-mask-image: none !important; mask-image: none !important;
}

/* ---------------------------------------------------------- paineis */
body.mr-dream .panel,
body.mr-dream .home-news-block-article,
body.mr-dream .mk-filtros,
body.mr-dream .thumbnail,
body.mr-dream .well,
body.mr-dream .mr-stat {
	background: rgba(5,31,53,.84) !important;
	background-image: none !important;
	border: 1px solid var(--dr-borda) !important;
	border-radius: 20px !important;
	box-shadow: 0 4px 6px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.25) !important;
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	color: var(--dr-texto);
}
body.mr-dream .panel:hover,
body.mr-dream .home-news-block-article:hover {
	transform: none;
	border-color: var(--dr-borda-luz) !important;
}

body.mr-dream .panel-heading,
body.mr-dream .panel-default > .panel-heading,
body.mr-dream .panel-primary > .panel-heading,
body.mr-dream .panel-info > .panel-heading {
	background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) !important;
	border-bottom: 1px solid rgba(255,255,255,.06) !important;
	box-shadow: none !important;
	color: #fff !important;
	padding: 16px 20px 14px 34px !important;
	font-family: var(--dr-fonte) !important;
	font-weight: 800 !important;
	letter-spacing: .02em !important;
	text-shadow: none !important;
}
body.mr-dream .panel-title { font-family: var(--dr-fonte) !important; font-weight: 800 !important; font-size: 15px; color: #fff; }
/* o losango do viking vira uma barrinha laranja acesa */
body.mr-dream .panel-heading::before,
body.mr-dream #content .panel-heading::before {
	left: 18px; top: 50%;
	width: 4px; height: 16px;
	margin-top: -8px;
	transform: none;
	border-radius: 4px;
	background: linear-gradient(0deg, var(--dr-ouro-b), var(--dr-ouro-a));
	box-shadow: 0 0 8px rgba(255,149,51,.7);
}
body.mr-dream .panel-body { padding: 18px 20px !important; }
body.mr-dream .panel-footer { background: rgba(0,0,0,.18) !important; border-top: 1px solid rgba(255,255,255,.06) !important; }

/* ---------------------------------------------------------- tabelas */
body.mr-dream .table { color: var(--dr-texto); background: transparent; }
body.mr-dream .table > thead > tr > th,
body.mr-dream .rankings-table tr:first-child td {
	background: transparent !important;
	border-bottom: 1px solid rgba(255,255,255,.12) !important;
	color: var(--dr-apagado) !important;
	font-family: var(--dr-fonte) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: .06em !important;
	text-shadow: none !important;
}
body.mr-dream .table > tbody > tr > td { border-top: 1px solid rgba(255,255,255,.05) !important; }
body.mr-dream .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.025); }
body.mr-dream .table-hover > tbody > tr:hover,
body.mr-dream #content .table-hover > tbody > tr:hover { background: rgba(255,149,51,.10); }
body.mr-dream .table-bordered,
body.mr-dream .table-bordered > tbody > tr > td,
body.mr-dream .table-bordered > thead > tr > th { border-color: rgba(255,255,255,.07) !important; }

/* ---------------------------------------------------------- formularios */
body.mr-dream .form-control {
	height: 44px;
	background: rgba(0,0,0,.35) !important;
	background-image: none !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: 12px !important;
	color: #fff !important;
	box-shadow: none !important;
	font-family: var(--dr-fonte);
}
body.mr-dream textarea.form-control { height: auto; }
body.mr-dream .form-control:focus {
	border-color: var(--dr-laranja) !important;
	box-shadow: 0 0 0 3px rgba(255,149,51,.18) !important;
}
body.mr-dream label { font-weight: 600; color: #cfdbe8; }

/* ---------------------------------------------------------- alertas */
body.mr-dream .alert {
	background: rgba(5,31,53,.9) !important;
	background-image: none !important;
	border: 1px solid var(--dr-borda) !important;
	border-left: 4px solid var(--dr-laranja) !important;
	border-radius: 14px !important;
	color: var(--dr-texto) !important;
	text-shadow: none !important;
	box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}
body.mr-dream .alert a { color: #ffd38a; }
body.mr-dream .alert strong { color: #fff; }
body.mr-dream .alert-success { border-left-color: #3fb950 !important; }
body.mr-dream .alert-danger  { border-left-color: #e5352b !important; }
body.mr-dream .alert-info    { border-left-color: var(--dr-azul) !important; }

/* ---------------------------------------------------------- abas e paginacao */
body.mr-dream .rankings_menu a,
body.mr-dream .nav-tabs > li > a {
	font-family: var(--dr-fonte) !important;
	font-weight: 700 !important;
	background: linear-gradient(180deg, #16294f, #1a3366) !important;
	border: 1px solid var(--dr-borda) !important;
	color: #c9d6e6 !important;
}
body.mr-dream .rankings_menu a:hover { border-color: rgba(255,149,51,.6) !important; color: #fff !important; }
body.mr-dream .rankings_menu a.active,
body.mr-dream .rankings_menu a.selected,
body.mr-dream .rankings_menu .active a,
body.mr-dream .nav-tabs > li.active > a {
	background: linear-gradient(0deg, #ff8339 0 6%, transparent 0), linear-gradient(0deg, #9b430e, #46261f) !important;
	color: #fff !important;
	border-color: rgba(255,149,51,.5) !important;
	box-shadow: 0 0 18px rgba(255,113,28,.25) !important;
}
body.mr-dream .pagination > li > a,
body.mr-dream .pagination > li > span { background: var(--dr-caixa) !important; border-color: var(--dr-borda) !important; color: #dfe7f1 !important; }
body.mr-dream .pagination > .active > a,
body.mr-dream .pagination > .active > span { background: var(--dr-laranja) !important; color: #1a1206 !important; }

body.mr-dream .modal-content,
body.mr-dream .dropdown-menu,
body.mr-dream .list-group-item { background: var(--dr-caixa) !important; background-image: none !important; border-color: var(--dr-borda) !important; }
body.mr-dream .modal-content { border-radius: 20px; }

/* ================================================================ HERO */
.dr-hero {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
	padding: 70px 0 56px;
	margin-bottom: 10px;
}
.dr-hero-titulo {
	position: relative;
	margin: 0 !important;
	font-family: var(--dr-fonte) !important;
	font-weight: 900 !important;
	font-size: clamp(54px, 11vw, 132px) !important;
	line-height: .9 !important;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.dr-hero-titulo span {
	background: linear-gradient(0deg, var(--dr-ouro-b), var(--dr-ouro-a));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 6px 24px rgba(255,113,28,.35));
}
.dr-hero-titulo sup {
	top: -1.9em;
	margin-left: 8px;
	padding: 5px 10px;
	border-radius: 8px;
	background: #ff5f00;
	box-shadow: 0 0 32px rgba(255,95,0,.45);
	font-size: clamp(11px, 1.4vw, 16px);
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff;
	-webkit-text-fill-color: #fff;
	vertical-align: baseline;
	white-space: nowrap;
}
.dr-hero-chamada {
	margin: 22px 0 30px;
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: rgba(255,255,255,.78);
	animation: dr-respira 3s ease-in-out infinite;
}
@keyframes dr-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); color: #fff; } }

.dr-hero-cartoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 34px; }
.dr-cartao {
	position: relative;
	width: 170px; aspect-ratio: 16 / 10;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	padding: 18px 12px 10px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(20px);
	        backdrop-filter: blur(20px);
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
	transition: transform .25s, border-color .25s;
}
.dr-cartao:hover { transform: translateY(-4px); border-color: rgba(255,214,0,.5); }
.dr-cartao b {
	font-size: 30px; font-weight: 800; line-height: 1;
	background: linear-gradient(90deg, #efd562, #f2ae00);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dr-cartao span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.75); }
.dr-selo {
	position: absolute; top: 0; left: 0;
	padding: 4px 9px;
	background: #ff5f00;
	border-bottom-right-radius: 10px;
	box-shadow: 0 0 32px rgba(255,95,0,.4);
	font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .03em;
	color: #fff;
}
.dr-cartao-online b { display: flex; align-items: center; gap: 8px; background: none; -webkit-text-fill-color: #fff; color: #fff; }
.dr-cartao-online .dr-ponto { width: 10px; height: 10px; }

.dr-hero-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------------------------------------------------------- resto da home */
body.mr-dream .mr-stats { gap: 12px; }
body.mr-dream .mr-stat b { font-family: var(--dr-fonte) !important; font-weight: 800 !important; color: #fff !important; text-shadow: none; }
body.mr-dream .mr-stat span { color: var(--dr-apagado); font-weight: 700; }
body.mr-dream .mr-prox-evento b { color: var(--dr-amarelo) !important; }

body.mr-dream .home-news-block-header h2 { font-family: var(--dr-fonte) !important; font-weight: 800 !important; font-size: 26px; text-transform: uppercase; }
body.mr-dream .home-news-block-article { margin-bottom: 8px; padding: 12px 6px; border-radius: 14px !important; }
body.mr-dream .home-news-block-article-type {
	display: inline-block; padding: 3px 10px; border-radius: 6px;
	background: #ff5f00; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase;
}
body.mr-dream .home-news-block-article-title a { color: #fff; font-weight: 700; }
body.mr-dream .home-news-block-article-date { color: var(--dr-apagado); font-weight: 600; }
body.mr-dream .sidebar-banner img { border-radius: 20px; }

/* ================================================================ RODAPE */
body.mr-dream .footer {
	max-width: none !important;
	width: 100%;
	background: linear-gradient(180deg, rgba(5,31,53,.0), rgba(5,31,53,.85) 30%) !important;
	background-image: none;
	border-top: 1px solid rgba(255,255,255,.06) !important;
	box-shadow: none !important;
	color: var(--dr-apagado);
	font-family: var(--dr-fonte);
}
body.mr-dream .footer .footer-container { max-width: 1200px; margin: 0 auto; }
body.mr-dream .footer a { color: #dfe7f1; font-weight: 600; }
body.mr-dream .footer hr { background: rgba(255,255,255,.08); }
.dr-relogio {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px;
	max-width: 1200px; margin: 0 auto 14px; padding-top: 16px;
	font-size: 12px; font-weight: 600; color: var(--dr-apagado);
}
.dr-relogio time { color: #fff; }

/* ================================================================ RESPONSIVO */
@media (max-width: 1280px) {
	.dr-servidor { display: none; }
	.dr-link { padding: 0 9px; font-size: 12px; }
	.dr-link svg { display: none; }
}
@media (max-width: 1024px) {
	.dr-header { gap: 12px; padding: 0 12px; }
	.dr-link { padding: 0 7px; }
}

/* Celular: o menu desce e vira a barra fixa de baixo, com icone e rotulo
   pequeno; o "Mais" abre para cima, como folha. O cabecalho fica so com logo,
   idioma e os botoes. */
@media (max-width: 860px) {
	body.mr-dream { padding-bottom: 64px; }
	.dr-header { height: 60px; }
	.dr-logo img { height: 46px; }
	.dr-acoes { margin-left: auto; gap: 6px; }
	.dr-acoes .dr-btn { height: 36px; padding: 0 14px !important; font-size: 12px !important; }

	.dr-nav {
		position: fixed; left: 0; right: 0; bottom: 0;
		height: 62px;
		z-index: 600;
		background: linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05)), rgba(3,12,20,.72);
		-webkit-backdrop-filter: blur(24px);
		        backdrop-filter: blur(24px);
		border-top: 1px solid rgba(255,255,255,.08);
	}
	.dr-nav > ul { width: 100%; justify-content: space-around; }
	.dr-nav > ul > li { flex: 1 1 0; justify-content: center; }
	.dr-link {
		flex-direction: column; justify-content: center; gap: 3px;
		width: 100%; padding: 0 2px;
		font-size: 9.5px; letter-spacing: 0;
		text-align: center;
	}
	.dr-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	.dr-link svg { display: block; width: 20px; height: 20px; }
	.dr-link i { display: none; }
	.dr-link::after { top: 0; bottom: auto; border-radius: 0 0 64px 64px; }
	.dr-link::before { top: 0; bottom: auto; }

	.dr-mais { position: static !important; }
	.dr-mais-menu {
		position: fixed; top: auto; bottom: 62px; left: 8px; right: 8px;
		min-width: 0;
		max-height: 60vh; overflow-y: auto;
		border: 1px solid var(--dr-borda);
		border-radius: 16px;
		transform: translateY(10px);
	}
	/* no toque o :hover gruda; so abre pelo clique */
	.dr-mais:hover .dr-mais-menu { opacity: 0; visibility: hidden; }
	.dr-mais.aberto .dr-mais-menu { opacity: 1; visibility: visible; transform: none; }

	.dr-hero { padding: 40px 0 34px; }
	.dr-hero-titulo sup { display: block; width: max-content; margin: 12px auto 0; top: 0; }
	.dr-cartao { width: calc(50% - 6px); max-width: 190px; }
	.dr-cartao b { font-size: 24px; }

	body.mr-dream .mr-fundo::after { display: none; }
}
@media (max-width: 480px) {
	.dr-acoes .mr-lang-btn span, .dr-acoes .mr-lang-btn i { display: none; }
	.dr-acoes .dr-btn { padding: 0 11px !important; font-size: 11px !important; }
	.dr-btn-grande { height: 48px; padding: 0 24px !important; font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dr-hero-chamada, .dr-ponto { animation: none !important; }
}

/* ------------------------------------------- ajustes de especificidade
   O override.css usa "#content h1" e "#content .table > thead > tr > th" com
   !important; com o id na frente eles ganham de qualquer seletor so de classe. */
body.mr-dream #content .dr-hero-titulo {
	font-family: var(--dr-fonte) !important;
	font-weight: 900 !important;
	font-size: clamp(54px, 9.5vw, 132px) !important;
	line-height: .9 !important;
	text-align: center;
	margin: 0 !important;
}
body.mr-dream #content .table > thead > tr > th {
	font-family: var(--dr-fonte) !important;
	font-weight: 700 !important;
	font-size: 11.5px !important;
	color: var(--dr-apagado) !important;
	letter-spacing: .06em !important;
}
body.mr-dream #content .home-news-block-header h2 { font-style: normal; letter-spacing: 0 !important; }
body.mr-dream .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.mr-dream .panel-title .pull-right { float: none !important; margin: 0 0 0 auto; }

/* o online ja esta no cartao do hero; na faixa de numeros ficaria repetido */
body.mr-dream .mr-stats .mr-stat:first-child { display: none; }

/* tabelas soltas no miolo (fora de painel) ganham o mesmo vidro dos cartoes,
   senao o texto fica direto em cima da arte dos personagens */
body.mr-dream #content > div > .table,
body.mr-dream #content > div > .table-responsive > .table {
	background: rgba(5,31,53,.84) !important;
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
body.mr-dream #content h2,
body.mr-dream #content h3 {
	font-family: var(--dr-fonte) !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
}
body.mr-dream #content h2 { font-size: 26px; }
body.mr-dream select {
	background-color: #0a2a49 !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.14) !important;
	border-radius: 10px;
}

/* ================================================= O SOUL MASTER NO LUGAR DELE
   O cavaleiro mora dentro do background.jpg, entao nao da para so esconde-lo:
   o mr-fundo-limpo.jpg e a mesma arte com o lado direito trocado pelo espelho
   do esquerdo (Tools/SiteArt/gera-fundo-lancer.php), e o Soul Master entra como
   camada propria, igual a Slayer do outro lado.

   A arte dele e o banner oficial da home do MU Online (Webzen, 1920x760), na
   resolucao original: recortado do castelo com alfa em elipse e o cenario
   escurecido antes do alfa (Tools/SiteArt/gera-sm.php). Ele ja olha para a
   esquerda, entao nao precisa espelhar. */
body.mr-dream .mr-cavaleiro { background-image: url("../img/mr-fundo-limpo.jpg"); }
@media only screen and (min-width: 2000px) {
	body.mr-dream .mr-cavaleiro { background-image: url("../img/mr-fundo-limpo-2600.jpg"); }
}
body.mr-dream .mr-aura { display: none; }

.mr-sm,
.mr-aura-sm {
	position: absolute;
	top: 96px; right: -330px;
	width: 1100px; height: 685px;
}
.mr-sm {
	background: url("../img/mr-sm.png") no-repeat center;
	background-size: 1100px 685px;
	animation: dr-sm-respira 9s ease-in-out infinite;
}
/* o azul da magia: na cabeca do cajado e na esfera da mao, em screen (so clareia) */
.mr-aura-sm {
	mix-blend-mode: screen;
	background:
		radial-gradient(ellipse 13% 18% at 22% 22%, rgba(90,150,255,.35), transparent 72%),
		radial-gradient(ellipse 10% 14% at 72% 61%, rgba(120,220,255,.35), transparent 72%);
	animation: mr-aura-pulsa 5.5s ease-in-out infinite;
}
@keyframes dr-sm-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media only screen and (max-width: 1700px) {
	.mr-sm, .mr-aura-sm { top: 100px; right: -250px; width: 880px; height: 548px; }
	.mr-sm { background-size: 880px 548px; }
}
/* celular: atras da Slayer, menor e apagado */
@media only screen and (max-width: 1100px) {
	.mr-sm, .mr-aura-sm { top: 64px; right: -150px; width: 560px; height: 349px; }
	.mr-sm { background-size: 560px 349px; opacity: .55; }
	.mr-aura-sm { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
	.mr-sm, .mr-aura-sm { animation: none !important; }
}

/* ================================================= A SLAYER MENOR (MAIS NITIDA)
   A arte dela tem so 400px de altura na origem (profiles/sl.jpg); o tema a mostrava
   em 907px, ampliada 2.3x, e por isso saia macia. Em 640px a ampliacao cai para
   1.6x e o contorno fica firme. As tres camadas dela andam juntas, e a da luz
   usa o proprio PNG como mascara, entao o mask-size acompanha. */
@media only screen and (min-width: 1101px) {
	body.mr-dream .mr-slayer,
	body.mr-dream .mr-aura-sl,
	body.mr-dream .mr-slayer-luz { top: 118px; left: 10px; width: 480px; height: 640px; }
	body.mr-dream .mr-slayer { background-size: 480px 640px; opacity: .95; }
	body.mr-dream .mr-slayer-luz { -webkit-mask-size: 480px 640px; mask-size: 480px 640px; }
}
@media only screen and (min-width: 1101px) and (max-width: 1700px) {
	body.mr-dream .mr-slayer,
	body.mr-dream .mr-aura-sl,
	body.mr-dream .mr-slayer-luz { top: 112px; left: 0; width: 420px; height: 560px; }
	body.mr-dream .mr-slayer { background-size: 420px 560px; }
	body.mr-dream .mr-slayer-luz { -webkit-mask-size: 420px 560px; mask-size: 420px 560px; }
}