/* ==========================================================================
   Mu Rings - camada viking do site publico
   ==========================================================================
   Irma do admincp/css/viking.css, mesmo vocabulario: chapa de ferro rebitada,
   letra entalhada, ouro como acento e pergaminho onde precisa de texto escuro.

   Carregada DEPOIS do override.css de proposito. Aqui NAO se mexe em:
     - .mr-fundo / .mr-fogo / .mr-brasa  (as brasas que sobem)
     - os cursores de espada e mao dourada
     - .page-title span                  (o brilho que atravessa o titulo)
     - as animacoes de entrada dos paineis
   Tudo isso ja vem do override.css e continua valendo; esta folha so troca
   superficie, cor e relevo. Remover a linha do <link> em
   templates/default/index.php devolve o site ao estado anterior.

   Fonte: usa a Cinzel que o template JA carrega (linha 52 do index.php).
   Nenhuma requisicao nova - se o Google Fonts falhar, cai em Georgia.
   ========================================================================== */

:root {
    --vk-noite:      #0f131a;
    --vk-ferro:      #19202a;
    --vk-borda:      #2f3b4c;
    --vk-borda-luz:  #3d4c61;
    --vk-texto:      #d7dee7;
    --vk-apagado:    #8a99ad;
    --vk-ouro:       #c9a227;
    --vk-ouro-claro: #e8c85a;
    --vk-ouro-fosco: #8a6a12;
    --vk-sangue:     #9d2f28;
    --vk-pergaminho: #efe3c8;

    --vk-titulo: "Cinzel", Georgia, "Times New Roman", serif;

    --vk-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E");
    --vk-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='0.10'/%3E%3C/svg%3E");

    --vk-rebites:
        radial-gradient(circle at 9px 9px, rgba(232,200,90,.8) 0 1.6px, rgba(90,70,14,.9) 2.2px, transparent 3px),
        radial-gradient(circle at calc(100% - 9px) 9px, rgba(232,200,90,.8) 0 1.6px, rgba(90,70,14,.9) 2.2px, transparent 3px),
        radial-gradient(circle at 9px calc(100% - 9px), rgba(232,200,90,.8) 0 1.6px, rgba(90,70,14,.9) 2.2px, transparent 3px),
        radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(232,200,90,.8) 0 1.6px, rgba(90,70,14,.9) 2.2px, transparent 3px);
}

/* ------------------------------------------------------------------ base */
/* fundo com grao, mas transparente onde as brasas passam (z-index -1) */

body {
    background-color: var(--vk-noite);
    background-image:
        var(--vk-grao),
        radial-gradient(ellipse at 50% -5%, #1c2530 0%, transparent 55%),
        linear-gradient(180deg, #131922 0%, #0d1117 100%);
    background-attachment: fixed;
    color: var(--vk-texto);
}

a { color: var(--vk-ouro-claro); }
a:hover, a:focus { color: #fff; }

hr {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vk-ouro-fosco), transparent);
}

h1, h2, h3, h4, h5, .page-title {
    font-family: var(--vk-titulo);
    letter-spacing: .06em;
    color: #f0e6cf;
    text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.06);
}

/* ornamento de losangos sob o titulo da pagina */
.page-title {
    position: relative;
    padding-bottom: 10px;
}
.page-title::after {
    content: "";
    display: block;
    height: 9px;
    margin-top: 10px;
    background:
        repeating-linear-gradient(135deg, rgba(201,162,39,.5) 0 1px, transparent 1px 9px),
        repeating-linear-gradient( 45deg, rgba(201,162,39,.5) 0 1px, transparent 1px 9px),
        linear-gradient(90deg, rgba(201,162,39,.55), rgba(201,162,39,.10) 65%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}

/* ------------------------------------------------------------- a logo */
/* A arte ja tem brilho vermelho embutido; aqui vem o halo POR FORA dela.
   drop-shadow segue o recorte do PNG, entao o brilho contorna o desenho e
   nao a caixa da imagem - box-shadow faria um retangulo. */

.webengine-mu-logo {
    filter:
        drop-shadow(0 0 10px rgba(200, 40, 32, .75))
        drop-shadow(0 0 26px rgba(168, 28, 22, .55))
        drop-shadow(0 0 60px rgba(120, 16, 12, .40));
    animation: vk-brasa-logo 3.6s ease-in-out infinite;
}

/* o halo respira, como brasa */
@keyframes vk-brasa-logo {
    0%, 100% {
        filter:
            drop-shadow(0 0 10px rgba(200, 40, 32, .70))
            drop-shadow(0 0 26px rgba(168, 28, 22, .50))
            drop-shadow(0 0 60px rgba(120, 16, 12, .35));
    }
    50% {
        filter:
            drop-shadow(0 0 16px rgba(226, 58, 46, .90))
            drop-shadow(0 0 40px rgba(190, 34, 26, .65))
            drop-shadow(0 0 84px rgba(140, 20, 14, .50));
    }
}

/* clarao vermelho atras da logo, preso ao #header */
#header {
    position: relative;
}
#header::before {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: 620px; height: 420px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
                rgba(190, 34, 26, .30) 0%,
                rgba(150, 24, 18, .16) 38%,
                transparent 70%);
    pointer-events: none;
    z-index: 0;
}
#header a, #header picture, #header img { position: relative; z-index: 1; }

/* ------------------------------------------------------- barras e menu */
/* viga de madeira com cinta de ferro, igual a do painel */

.global-top-bar,
.webengine-navbar,
nav.navbar,
.footer {
    background-color: #1a222d;
    background-image:
        var(--vk-grao),
        repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 90px),
        linear-gradient(180deg, #27323f 0%, #151c25 100%);
    border-color: #0c1015;
    color: var(--vk-texto);
}

.global-top-bar { border-bottom: 3px solid var(--vk-ouro-fosco); box-shadow: 0 3px 0 rgba(0,0,0,.45); }
.footer         { border-top: 3px solid var(--vk-ouro-fosco); box-shadow: 0 -3px 0 rgba(0,0,0,.45); color: var(--vk-apagado); }

.global-top-bar-separator { background: linear-gradient(180deg, transparent, var(--vk-ouro-fosco), transparent); }

.webengine-navbar a, nav a {
    font-family: var(--vk-titulo);
    letter-spacing: .05em;
    color: #e6ecf4;
    text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.webengine-navbar a:hover, nav a:hover { color: var(--vk-ouro-claro); }

/* ---------------------------------------------------------- o miolo */
/* O #container (a coluna de 1040px do style.css) vinha branco pela variavel
   --webenginebg2 e cobria o fundo escuro e as brasas. Aqui ele vira a propria
   chapa: pedra escura, veio vermelho nas bordas e sombra que a destaca do fundo. */

#container {
    background-color: #141a23;
    background-image:
        var(--vk-grao),
        linear-gradient(180deg, rgba(150,26,20,.10) 0%, transparent 22%),
        linear-gradient(180deg, #1a212b 0%, #11161e 100%);
    border-left: 1px solid rgba(157,47,40,.30);
    border-right: 1px solid rgba(157,47,40,.30);
    box-shadow:
        0 0 60px rgba(120,18,14,.22),
        0 0 0 1px rgba(0,0,0,.6);
}

/* O corpo da pagina puxa para o sangue: brasa vermelha atras do conteudo,
   e o acento dos paineis deixa de ser ouro e passa a ser vermelho forjado.
   O ouro continua nos titulos e nos numeros, para os dois nao competirem. */

#content {
    position: relative;
}
#content::before {
    content: "";
    position: fixed;
    left: 50%; top: 50%;
    width: 1200px; height: 900px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse at 50% 40%, rgba(150, 26, 20, .16) 0%, transparent 62%),
        radial-gradient(ellipse at 50% 95%, rgba(120, 18, 14, .12) 0%, transparent 55%);
    pointer-events: none;
    z-index: -1;
}

/* cinta vermelha no topo do painel, no lugar do fio de ouro */
#content .panel-heading {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 rgba(157,47,40,.85);
}
/* losango do titulo do painel: rubi em vez de ouro */
#content .panel-heading::before {
    background: linear-gradient(135deg, #e05a4c, #7a1c16);
    box-shadow: 0 0 6px rgba(200,60,48,.65), inset 0 0 0 1px rgba(0,0,0,.4);
}
/* rebites acesos, como ferro ainda quente */
#content .panel,
#content .home-news-block-article,
#content .mk-filtros {
    border-color: #14181f;
    box-shadow:
        0 3px 14px rgba(0,0,0,.5),
        0 0 0 1px rgba(157,47,40,.22),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* ornamento sob o titulo da pagina vai de ouro para sangue */
.page-title::after {
    background:
        repeating-linear-gradient(135deg, rgba(190,52,42,.65) 0 1px, transparent 1px 9px),
        repeating-linear-gradient( 45deg, rgba(190,52,42,.65) 0 1px, transparent 1px 9px),
        linear-gradient(90deg, rgba(190,52,42,.7), rgba(157,47,40,.15) 65%, transparent);
}

/* linha da tabela responde em vermelho */
#content .table-hover > tbody > tr:hover { background-color: rgba(157,47,40,.18); }

/* ------------------------------------------------------------- paineis */
/* chapa de ferro rebitada nos quatro cantos */

.panel,
.home-news-block-article,
.mk-filtros,
.thumbnail,
.well {
    background-color: var(--vk-ferro);
    background-image: var(--vk-rebites), var(--vk-grao), linear-gradient(180deg, #1d2530 0%, #161c25 100%);
    border: 1px solid #0c1015;
    border-radius: 2px;
    color: var(--vk-texto);
    box-shadow:
        0 3px 14px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 0 1px rgba(120,140,170,.09);
}

.panel-heading {
    background-image: var(--vk-grao), linear-gradient(180deg, #2a3644 0%, #1b232e 100%);
    border-bottom: 1px solid #0c1015;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(201,162,39,.30);
    color: #f0e6cf;
    font-family: var(--vk-titulo);
    letter-spacing: .05em;
    text-shadow: 0 1px 0 rgba(0,0,0,.8);
    position: relative;
    padding-left: 28px;
}

/* losango de ouro antes do titulo do painel */
.panel-heading::before {
    content: "";
    position: absolute;
    left: 11px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -4px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--vk-ouro-claro), var(--vk-ouro-fosco));
    box-shadow: 0 0 4px rgba(232,200,90,.5), inset 0 0 0 1px rgba(0,0,0,.35);
}

/* o bootstrap manda #333 nesses, mais especifico que .panel-heading */
.panel-default > .panel-heading,
.panel-info    > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger  > .panel-heading {
    background-color: #1b232e;
    background-image: var(--vk-grao), linear-gradient(180deg, #2a3644 0%, #1b232e 100%);
    border-color: #0c1015;
    color: #f0e6cf;
}
.panel-primary { border-color: var(--vk-ouro-fosco); }
.panel-primary > .panel-heading {
    background-color: #232d3a;
    background-image: var(--vk-grao), linear-gradient(180deg, #3a4658 0%, #232d3a 100%);
    border-color: #0c1015;
    color: var(--vk-ouro-claro);
}

.panel-body   { color: var(--vk-texto); }
.panel-footer {
    background-image: var(--vk-grao), linear-gradient(180deg, #151b23 0%, #11161d 100%);
    border-top: 1px solid #0c1015;
    color: var(--vk-apagado);
}

/* ------------------------------------------------------- faixa de stats */
/* cada numero da home vira uma placa de ferro presa na parede */

.mr-stat {
    background-image: var(--vk-rebites), var(--vk-grao), linear-gradient(180deg, #222b37 0%, #171d26 100%);
    border: 1px solid #0c1015 !important;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.mr-stat b {
    font-family: var(--vk-titulo);
    color: var(--vk-ouro-claro);
    text-shadow: 0 2px 3px rgba(0,0,0,.75);
}
.mr-stat span {
    color: var(--vk-apagado);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
}

/* ------------------------------------------------------------- tabelas */

.table { color: var(--vk-texto); }

.table > thead > tr > th {
    background-image: var(--vk-grao), linear-gradient(180deg, #27323f 0%, #1c242f 100%);
    border-bottom: 2px solid var(--vk-ouro-fosco) !important;
    color: var(--vk-ouro-claro);
    font-family: var(--vk-titulo);
    letter-spacing: .05em;
    text-shadow: 0 1px 0 rgba(0,0,0,.75);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td { border-top-color: rgba(255,255,255,.06) !important; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.022); }
.table-hover  > tbody > tr:hover             { background-color: rgba(201,162,39,.13); }

/* -------------------------------------------------------------- botoes */

.btn {
    border-radius: 2px;
    font-family: var(--vk-titulo);
    letter-spacing: .06em;
    border: 1px solid #0c1015;
    text-shadow: 0 1px 0 rgba(0,0,0,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5);
}

.btn-default { background-image: var(--vk-grao), linear-gradient(180deg, #374454 0%, #232d39 100%); color: var(--vk-texto); }
.btn-default:hover, .btn-default:focus {
    background-image: var(--vk-grao), linear-gradient(180deg, #41505f 0%, #2a3543 100%);
    border-color: var(--vk-ouro-fosco); color: #fff;
}

.btn-primary,
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background-image: var(--vk-grao), linear-gradient(180deg, #b08420 0%, #6f5212 100%);
    border-color: #0c1015;
    color: #fdf6e6;
}
.btn-primary:hover, .btn-primary:focus {
    background-image: var(--vk-grao), linear-gradient(180deg, #c79726 0%, #7d5c15 100%);
    color: #fff;
}

.btn-success { background-image: var(--vk-grao), linear-gradient(180deg, #55854f 0%, #315030 100%); color: #f2f8f1; }
.btn-success:hover, .btn-success:focus { background-image: var(--vk-grao), linear-gradient(180deg, #629a5b 0%, #3a5d38 100%); color: #fff; }

.btn-danger  { background-image: var(--vk-grao), linear-gradient(180deg, #a8352c 0%, #66201b 100%); color: #fdeeec; }
.btn-danger:hover, .btn-danger:focus { background-image: var(--vk-grao), linear-gradient(180deg, #bd3e34 0%, #7a2721 100%); color: #fff; }

/* --------------------------------------------------------- formularios */

.form-control {
    background-color: #0e131a;
    background-image: var(--vk-grao);
    border: 1px solid #0a0e13;
    border-radius: 2px;
    color: var(--vk-texto);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.65), inset 0 -1px 0 rgba(255,255,255,.05);
}
.form-control:focus {
    background-color: #121924;
    border-color: var(--vk-ouro-fosco);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 0 0 2px rgba(201,162,39,.25);
    color: #fff;
}
.form-control::placeholder { color: #647386; }
select.form-control option { background-color: #0e131a; color: var(--vk-texto); }

label, .form-horizontal .control-label {
    color: #cdd7e3;
    font-weight: 600;
    letter-spacing: .03em;
}

.input-group-addon {
    background-image: var(--vk-grao), linear-gradient(180deg, #27323f 0%, #1c242f 100%);
    border-color: #0c1015;
    color: var(--vk-ouro-claro);
}

.text-muted { color: var(--vk-apagado) !important; }

/* ------------------------------------------------------------- alertas */
/* pergaminho, pelo mesmo motivo do painel: ha texto com cor inline dentro */

.alert {
    background-color: var(--vk-pergaminho);
    background-image:
        var(--vk-fibra),
        radial-gradient(ellipse at 8% 120%, rgba(140,105,45,.20), transparent 55%),
        radial-gradient(ellipse at 92% -20%, rgba(140,105,45,.16), transparent 55%),
        linear-gradient(180deg, #f5ecd6 0%, #e6d7b6 100%);
    border: 1px solid #b9a276;
    border-left: 6px solid var(--vk-ouro-fosco);
    border-radius: 1px;
    color: #33291a;
    box-shadow: 0 3px 12px rgba(0,0,0,.45), inset 0 0 22px rgba(120,90,40,.18);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.alert a { color: #6b4d12; text-decoration: underline; }
.alert strong { color: #241c08; }
.alert code { background-color: rgba(60,45,15,.10); color: #4d3a0d; border: 1px solid rgba(60,45,15,.22); text-shadow: none; }

.alert-success { border-left-color: #3f6a3b; }
.alert-danger  { border-left-color: var(--vk-sangue); }
.alert-warning { border-left-color: var(--vk-ouro); }
.alert-info    { border-left-color: #3d6f91; }

/* --------------------------------------------------------------- resto */

.modal-content, .dropdown-menu, .list-group-item {
    background-color: var(--vk-ferro);
    background-image: var(--vk-grao), linear-gradient(180deg, #1d2530 0%, #161c25 100%);
    border-color: #0c1015;
    color: var(--vk-texto);
}
.modal-header, .modal-footer { border-color: var(--vk-borda); }
.modal-title { font-family: var(--vk-titulo); letter-spacing: .05em; }

.dropdown-menu > li > a { color: var(--vk-texto); }
.dropdown-menu > li > a:hover { background-color: rgba(201,162,39,.15); color: var(--vk-ouro-claro); }

.nav-tabs { border-bottom-color: #0c1015; }
.nav-tabs > li > a { color: var(--vk-apagado); font-family: var(--vk-titulo); letter-spacing: .04em; }
.nav-tabs > li > a:hover { background-color: rgba(255,255,255,.05); border-color: transparent; color: var(--vk-ouro-claro); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-image: linear-gradient(180deg, #2a3644 0%, #1b232e 100%);
    border-color: #0c1015 #0c1015 transparent;
    border-top: 2px solid var(--vk-ouro);
    color: #fff;
}

.pagination > li > a, .pagination > li > span {
    background-image: linear-gradient(180deg, #232d39 0%, #1a222c 100%);
    border-color: #0c1015;
    color: var(--vk-texto);
}
.pagination > .active > a, .pagination > .active > span {
    background-image: linear-gradient(180deg, var(--vk-ouro-claro), var(--vk-ouro-fosco));
    border-color: #0c1015;
    color: #1a1206;
}

.badge { background-image: linear-gradient(180deg, #45566b 0%, #2c3745 100%); border: 1px solid #0c1015; color: #eaf0f7; }
.label { border: 1px solid rgba(0,0,0,.45); text-shadow: 0 1px 0 rgba(0,0,0,.5); letter-spacing: .03em; }

code, kbd, pre {
    background-color: #0c1117;
    border: 1px solid #0a0e13;
    color: var(--vk-ouro-claro);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}

/* barra de progresso de players online vira cinta de ouro */
.webengine-online-bar {
    background-color: #0c1117;
    border: 1px solid #0a0e13;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
.webengine-online-bar-progress {
    background-image: linear-gradient(180deg, var(--vk-ouro-claro) 0%, var(--vk-ouro-fosco) 100%);
    box-shadow: 0 0 8px rgba(232,200,90,.45);
}

::selection { background: rgba(201,162,39,.38); color: #fff; }

* { scrollbar-color: var(--vk-borda-luz) #0c1117; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0c1117; }
::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #46566a 0%, #2c3745 100%);
    border: 1px solid #0a0e13;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, var(--vk-ouro-claro), var(--vk-ouro-fosco)); }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Aviso de BETA TESTE no topo de todas as paginas (remover na abertura) */
.mr-beta-aviso {
    position: relative;
    z-index: 50;
    padding: 10px 16px;
    text-align: center;
    font-family: var(--vk-titulo);
    color: #fff3d6;
    background: linear-gradient(180deg, #8f2a22 0%, #5e1712 100%);
    border-bottom: 2px solid var(--vk-ouro);
    box-shadow: 0 2px 12px rgba(0,0,0,.55);
    letter-spacing: .5px;
    line-height: 1.4;
}
.mr-beta-aviso strong {
    display: inline-block;
    margin-right: 10px;
    color: var(--vk-ouro-claro);
    font-size: 16px;
    text-shadow: 0 0 8px rgba(232,200,90,.55);
    animation: mr-beta-pulso 2.4s ease-in-out infinite;
}
.mr-beta-aviso span { font-size: 14px; }
@keyframes mr-beta-pulso { 50% { opacity: .65; } }
@media (max-width: 600px) {
    .mr-beta-aviso strong { display: block; margin: 0 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .mr-beta-aviso strong { animation: none; }
}