/* ==========================================================================
   MU Imortal — camada visual (preto / azul / detalhes brancos)
   --------------------------------------------------------------------------
   Arquivo ADITIVO, carregado por ULTIMO (depois do app.css e do v7.css).
   So muda aparencia: nenhuma regra aqui esconde, move ou desliga sistemas,
   formularios, rankings, plugins ou scripts.
   Para voltar ao visual anterior basta remover o <link> deste arquivo
   nos layouts (default, page-builder e maintenance).
   ========================================================================== */

:root {
    --mh-ink: #04070d;            /* fundo geral            */
    --mh-panel: rgba(7, 14, 26, .86);   /* paineis        */
    --mh-panel-solid: #070e1a;
    --mh-row: rgba(12, 24, 44, .65);    /* linhas internas */
    --mh-line: #16304f;           /* bordas discretas       */
    --mh-blue: #2f8bff;           /* azul principal         */
    --mh-blue-deep: #1557c0;
    --mh-blue-light: #8cc4ff;     /* valores / links        */
    --mh-glow: 0 0 0 1px rgba(47, 139, 255, .35), 0 0 22px rgba(47, 139, 255, .18);
    --mh-text: #eaf2ff;
    --mh-muted: #8aa0bf;
    --mh-head: "Rajdhani", "Poppins", sans-serif;

    /* tokens do v7.css -> paleta MU Imortal (checkout, page builder, plugins v7) */
    --v7-bg: var(--mh-ink);
    --v7-surface: #0a1424;
    --v7-card: var(--mh-panel-solid);
    --v7-sunken: #0c1829;
    --v7-sidebar: #0a1424;
    --v7-primary: #2f8bff;
    --v7-primary-bright: #57a3ff;
    --v7-primary-hover: #1f77ea;
    --v7-accent: #8cc4ff;
    --v7-accent-hover: #ffffff;
    --v7-text: var(--mh-text);
    --v7-muted: var(--mh-muted);
    --v7-line: var(--mh-line);
    --v7-line-soft: #1d3d63;
    --v7-primary-soft: rgba(47, 139, 255, .2);
    --v7-shadow: 0 8px 24px rgba(0, 0, 0, .55);

    /* bootstrap */
    --bs-primary: #2f8bff;
    --bs-primary-rgb: 47, 139, 255;
    --bs-link-color: #8cc4ff;
    --bs-link-color-rgb: 140, 196, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --body-bg: var(--mh-ink);
}

/* --------------------------------------------------------------------------
   Base / fundo
   -------------------------------------------------------------------------- */
body {
    background-color: var(--mh-ink);
    background-image: url(../images/bg-muimortal.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 1920px auto;
    color: var(--mh-text);
}

@media (min-width: 1921px) {
    body { background-size: 100% auto; }
}

a { color: var(--mh-blue-light); }
a:hover { color: #fff; }

::selection { background: var(--mh-blue); color: #fff; }

/* --------------------------------------------------------------------------
   Menu superior
   -------------------------------------------------------------------------- */
header .navbar {
    background: rgba(3, 6, 12, .92);
    border-bottom: 1px solid rgba(47, 139, 255, .28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 6px 24px rgba(0, 0, 0, .45);
}

header .navbar .nav-item { margin: 0 .35rem 0 0; }

header .navbar .nav-link {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c9d8ee;
    padding: .55rem .6rem;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, text-shadow .15s ease;
}

header .navbar .nav-link:hover,
header .navbar .nav-link:active,
header .navbar .nav-link.active,
header .navbar .nav-link.show {
    background: transparent;
    color: #fff !important;
    border-bottom-color: var(--mh-blue);
    text-shadow: 0 0 12px rgba(47, 139, 255, .8);
}

@media (max-width: 991.98px) {
    header .navbar-collapse {
        background: rgba(4, 8, 16, .97);
        border: 1px solid rgba(47, 139, 255, .4);
    }
    header .navbar .nav-link { border-bottom: 0; }
}

.dropdown-menu {
    --bs-dropdown-bg: #060c17;
    --bs-dropdown-border-color: rgba(47, 139, 255, .35);
    --bs-dropdown-link-color: #d6e4f7;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(47, 139, 255, .18);
    --bs-dropdown-link-active-bg: var(--mh-blue);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   Topo: logo + Cadastro / Online / Downloads
   -------------------------------------------------------------------------- */
header .header { min-height: 430px; }

@media (min-width: 992px) {
    header .header-brand {
        left: auto;
        top: 40px;
        filter: drop-shadow(0 0 24px rgba(47, 139, 255, .45));
    }
    header .header .container { justify-content: flex-end; }
}

.mh-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 auto;
    padding: 0 12px;
    position: relative;
    z-index: 2;
}

.mh-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 260px;
    padding: 16px 26px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, rgba(9, 22, 44, .92), rgba(4, 9, 18, .92));
    border: 1px solid rgba(47, 139, 255, .6);
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
    box-shadow: inset 0 0 22px rgba(47, 139, 255, .25);
    transition: background .2s ease, box-shadow .2s ease;
}

.mh-cta:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(25, 80, 170, .95), rgba(8, 26, 60, .95));
    box-shadow: inset 0 0 30px rgba(47, 139, 255, .55);
}

.mh-cta-icon {
    font-size: 34px !important;
    color: var(--mh-blue);
    text-shadow: 0 0 14px rgba(47, 139, 255, .9);
}

.mh-cta:hover .mh-cta-icon { color: #fff; }

.mh-cta-text { display: flex; flex-direction: column; line-height: 1.05; }

.mh-cta-title {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mh-cta-sub {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mh-muted);
    margin-top: 4px;
}

.mh-online {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    background: radial-gradient(circle at 50% 40%, #0d2448 0%, #050b16 70%);
    border: 2px solid var(--mh-blue);
    box-shadow: 0 0 0 6px rgba(47, 139, 255, .1), 0 0 34px rgba(47, 139, 255, .55), inset 0 0 26px rgba(47, 139, 255, .3);
}

.mh-online:hover { color: #fff; box-shadow: 0 0 0 6px rgba(47, 139, 255, .18), 0 0 44px rgba(47, 139, 255, .75), inset 0 0 26px rgba(47, 139, 255, .4); }

.mh-online-count {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    color: #5fe3a1;
    text-shadow: 0 0 12px rgba(95, 227, 161, .55);
}

.mh-online-label {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .22em;
    margin-top: 2px;
}

@media (max-width: 767.98px) {
    header .header { min-height: 0; }
    .mh-hero-cta { gap: 14px; margin-top: 10px; }
    .mh-cta { min-width: 0; flex: 1 1 140px; padding: 12px 18px; gap: 10px; }
    .mh-cta-title { font-size: 18px; }
    .mh-cta-sub { display: none; }
    .mh-online { order: -1; flex-basis: 100%; width: 110px; height: 110px; flex: 0 0 110px; margin: 0 calc(50% - 55px); }
    .mh-online-count { font-size: 28px; }
}

/* redes sociais (home) e area da pagina */
.container-social { top: 26px; }
.page {
    background: transparent;
    margin-top: 50px;
    padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   Paineis
   -------------------------------------------------------------------------- */
.shadow-new,
.sidebar,
.login-box,
.page-mini,
.card,
.modal-content {
    background: var(--mh-panel);
    border: 1px solid rgba(47, 139, 255, .32);
    box-shadow: inset 0 1px 0 rgba(140, 196, 255, .08), 0 10px 30px rgba(0, 0, 0, .5);
}

.shadow-new { padding: 16px; }

.col-lg-3 > hr { opacity: 0; margin: .5rem 0; }
.sidebar { padding: 0 14px 12px; margin-bottom: 0; }
.login-box { padding: 0 14px 14px; }

/* cabecalho dos paineis */
.sidebar-title,
.login-box > .icon-text {
    margin: 0 -14px 12px !important;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(20, 52, 100, .75), rgba(7, 14, 26, 0));
    border-bottom: 1px solid rgba(47, 139, 255, .55);
    letter-spacing: .12em;
}

.icon-text { padding: 0; }
.icon-text .text,
.sidebar-title .text {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}

.icon {
    background: transparent;
    color: var(--mh-blue);
    border: 1px solid rgba(47, 139, 255, .45);
    border-radius: 2px;
}

.btn-more {
    background: transparent;
    border: 1px solid rgba(47, 139, 255, .55);
    color: var(--mh-blue-light);
}
.btn-more:hover { background: var(--mh-blue); color: #fff; }

/* titulos dentro da pagina */
.page h1, .page .h1 {
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 1.35rem;
    color: #fff;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(47, 139, 255, .45);
}

.page h2, .page .h2,
.top-class-name {
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.page h3, .page .h3 { font-family: var(--mh-head); font-weight: 700; letter-spacing: .08em; }
.page h3:before, .page .h3:before,
.page h3:after, .page .h3:after { border-top-color: rgba(47, 139, 255, .45); }

/* --------------------------------------------------------------------------
   Servidor / equipe (sidebar)
   -------------------------------------------------------------------------- */
.container-new-box { gap: 0; border: 1px solid var(--mh-line); }

.new-box,
.new-box.second {
    background: transparent;
    border-bottom: 1px solid var(--mh-line);
    text-align: left;
    padding: 9px 10px;
}
.new-box:nth-child(odd) { border-right: 1px solid var(--mh-line); }
.new-box p, .new-box p.second { color: var(--mh-muted); font-size: 11px; line-height: 1.5; }

.container-new-box-admin { margin-top: 0; }
.new-box-admin,
.new-box-admin.second {
    background: var(--mh-panel);
    border: 1px solid var(--mh-line);
}
.new-box-admin p { color: #e6eefb; }

.text-new a { color: var(--mh-blue-light); }
.progress { background: #0b1626; height: 6px; }

/* --------------------------------------------------------------------------
   Noticias / banner
   -------------------------------------------------------------------------- */
#slides-banner-carousel {
    border: 1px solid rgba(47, 139, 255, .4);
    box-shadow: 0 0 26px rgba(47, 139, 255, .15);
    margin-bottom: 1.5rem;
}
#slides-banner-carousel .carousel-indicators [data-bs-target] { background-color: var(--mh-blue); }

.posts { padding: 0; }
.posts-post {
    padding: .75rem .9rem !important;
    border-bottom: 1px solid var(--mh-line);
    transition: background .15s ease;
}
.posts-post:hover { background: rgba(47, 139, 255, .07); }
.posts-post a { font-family: var(--mh-head); font-size: 16px; font-weight: 700; color: #fff; }
.posts-post a:hover { color: var(--mh-blue-light); }
.posts-created { color: var(--mh-muted); }

/* --------------------------------------------------------------------------
   Top class / ranking / mercado
   -------------------------------------------------------------------------- */
.tab-content2 {
    background: rgba(5, 11, 21, .6);
    border: 1px solid var(--mh-line);
}

.top-class-header { border-bottom: 1px solid rgba(47, 139, 255, .45); }
.top-class-classes .nav-link img { transition: transform .15s ease, filter .15s ease; filter: saturate(.85); }
.top-class-classes .nav-link:hover img,
.top-class-classes .nav-link.active img { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(47, 139, 255, .8)); }
.top-class-classes .nav-link.active:after { background: var(--mh-blue); box-shadow: 0 0 10px var(--mh-blue); }

.top-class-content .name { font-family: var(--mh-head); font-weight: 700; font-size: 1.8rem; color: var(--mh-blue-light); text-shadow: 0 0 16px rgba(47, 139, 255, .5); }

.container-castle-new { border: 1px solid rgba(47, 139, 255, .4); }
.text-title { background: rgba(4, 9, 18, .72); border-color: rgba(47, 139, 255, .45); }
.avatar-castle { border-color: var(--mh-blue); }

/* --------------------------------------------------------------------------
   Componentes Bootstrap
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: #1f6fe0;
    --bs-btn-border-color: #3a8cff;
    --bs-btn-hover-bg: #2f8bff;
    --bs-btn-hover-border-color: #8cc4ff;
    --bs-btn-active-bg: #1557c0;
    --bs-btn-active-border-color: #2f8bff;
    --bs-btn-disabled-bg: #1b4f99;
    --bs-btn-disabled-border-color: #1b4f99;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
}
.btn-primary:hover { box-shadow: 0 0 18px rgba(47, 139, 255, .55); }

.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(47, 139, 255, .55);
    --bs-btn-color: #d6e4f7;
    --bs-btn-hover-bg: rgba(47, 139, 255, .16);
    --bs-btn-hover-border-color: var(--mh-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(47, 139, 255, .25);
    --bs-btn-active-border-color: var(--mh-blue);
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.form-control,
.form-select {
    background-color: #050b16;
    border-color: #1d3554;
    color: #fff;
}
.form-control:focus,
.form-select:focus {
    background-color: #071022;
    border-color: var(--mh-blue);
    box-shadow: 0 0 0 .2rem rgba(47, 139, 255, .25);
    color: #fff;
}
.form-control::placeholder { color: #5f7594; }
.form-label { color: #c9d8ee; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mh-text);
    --bs-table-border-color: var(--mh-line);
    --bs-table-striped-bg: rgba(47, 139, 255, .05);
    --bs-table-striped-color: var(--mh-text);
    --bs-table-hover-bg: rgba(47, 139, 255, .09);
    --bs-table-hover-color: #fff;
}
.table > thead th {
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid var(--mh-blue);
}

.nav-tabs { --bs-nav-tabs-border-color: var(--mh-line); }
.nav-tabs .nav-link { color: #b7c8e2; font-family: var(--mh-head); font-weight: 700; letter-spacing: .08em; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: transparent;
    color: #fff;
    border: 1px solid transparent;
    border-bottom: 2px solid var(--mh-blue);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: rgba(47, 139, 255, .2);
    --bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link { color: var(--mh-muted); }
.nav-pills .nav-link.active { box-shadow: inset 0 -2px 0 var(--mh-blue); }

.pagination {
    --bs-pagination-bg: #070e1a;
    --bs-pagination-border-color: var(--mh-line);
    --bs-pagination-color: #c9d8ee;
    --bs-pagination-hover-bg: rgba(47, 139, 255, .16);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-active-bg: var(--mh-blue);
    --bs-pagination-active-border-color: var(--mh-blue);
}

.card .card-header {
    background: linear-gradient(90deg, rgba(20, 52, 100, .85), rgba(7, 14, 26, .6));
    border: 0;
    border-bottom: 1px solid rgba(47, 139, 255, .55);
    box-shadow: none;
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .08em;
}

.list-group-heading { background: #0f2a52; border-color: rgba(47, 139, 255, .5); }

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */
footer { border-top: 1px solid rgba(47, 139, 255, .3); background-color: var(--mh-ink); }
.footer-column h3 { font-family: var(--mh-head); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.footer-column ul li a:hover,
.footer-credits a:hover { color: var(--mh-blue-light); }

/* --------------------------------------------------------------------------
   Ajustes finos
   -------------------------------------------------------------------------- */
/* lista da equipe encaixada no painel "Equipe" */
.container-new-box-admin {
    margin-top: calc(-1rem - 1px);
    padding: 0 14px 14px;
    background: var(--mh-panel);
    border: 1px solid rgba(47, 139, 255, .32);
    border-top: 0;
}
.new-box-admin, .new-box-admin.second { background: transparent; }

.nav-pills .nav-link { font-family: var(--mh-head); font-weight: 700; letter-spacing: .06em; }

@media (max-width: 767.98px) {
    body { background-size: 1150px auto; background-position: 30% top; }
}

/* --------------------------------------------------------------------------
   Garantia contra roxo antigo em cache: as imagens recoloridas tem nomes
   novos (-mi) e os blocos que eram roxos recebem a cor aqui tambem.
   -------------------------------------------------------------------------- */
.top-class-content { background-image: url(../images/castlhall-fame-mi.jpg); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
.container-castle-new { background-image: url(../images/castle-siege-mi.jpg); }
@media (max-width: 768px) { .container-castle-new { background-image: url(../images/castle-siege-mobi-mi.jpg); } }
footer { background-image: url(../images/footer-new-mi.jpg); }
.container-social { background-image: url(../images/bg-social-mi.png); }

.tab-content2 .tab-content,
.tab-content2 > .tab-content,
.page .tab-content > .row,
.page-body,
.page-mini { background-color: transparent; }

/* tabelas do Hall da Fama / rankings da home */
.hallfame-table,
.table-responsive > table {
    width: 100%;
    background: rgba(6, 13, 24, .9);
    border: 1px solid var(--mh-line);
    color: var(--mh-text);
}
.hallfame-table th,
.hallfame-table td { background: transparent; border-color: var(--mh-line); }
.hallfame-table tbody tr { background: rgba(10, 22, 40, .55); border-bottom: 1px solid var(--mh-line); }
.hallfame-table tbody tr:nth-child(even) { background: rgba(14, 30, 54, .55); }
.hallfame-table tbody tr:hover { background: rgba(47, 139, 255, .12); }
.hallfame-table thead th { color: #fff; border-bottom: 2px solid var(--mh-blue); background: rgba(9, 22, 44, .9); }

.list-characters .card,
.list-characters .character,
.character-avatar { background-color: rgba(6, 13, 24, .9); border-color: var(--mh-line); }

.table-dark {
    --bs-table-bg: rgba(6, 13, 24, .9);
    --bs-table-striped-bg: rgba(14, 30, 54, .6);
    --bs-table-hover-bg: rgba(47, 139, 255, .12);
    --bs-table-border-color: var(--mh-line);
    --bs-table-color: var(--mh-text);
}

.btn-primary { background-color: #1f6fe0; border-color: #3a8cff; }
.tab-content { background-color: rgba(6, 13, 24, .78); }

/* --------------------------------------------------------------------------
   Paginas internas (downloads, cadastro, rankings, informacoes, painel...)
   ganham um painel escuro por tras do conteudo. A home continua sem painel
   externo porque ja tem os paineis proprios (.shadow-new / sidebar).
   -------------------------------------------------------------------------- */
.page {
    background: linear-gradient(180deg, rgba(6, 12, 23, .93), rgba(4, 8, 15, .95));
    border: 1px solid rgba(47, 139, 255, .32);
    box-shadow: inset 0 1px 0 rgba(140, 196, 255, .08), 0 14px 40px rgba(0, 0, 0, .6);
    padding: 24px 28px 28px;
    margin-top: 50px;
}

.page:has(> .row > .shadow-new) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1rem 0;
}

.page .page-mini { background: transparent; border: 0; box-shadow: none; }

@media (max-width: 767.98px) {
    .page { padding: 16px 14px 20px; margin-top: 24px; }
}

.page-title h1 { margin-bottom: .75rem; }

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--mh-muted);
    --bs-breadcrumb-item-active-color: #fff;
    font-size: 13px;
    margin-bottom: 1.25rem;
}
.breadcrumb-item a { color: var(--mh-blue-light); text-decoration: none; }
.breadcrumb-item a:hover { color: #fff; }
.breadcrumb-item.active { color: #fff; }

.page-body h2, .page-body .h2 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
    padding-left: 10px;
    border-left: 3px solid var(--mh-blue);
}

/* lista lateral dos rankings / painel */
.list-group {
    --bs-list-group-bg: rgba(6, 13, 24, .9);
    --bs-list-group-color: #d6e4f7;
    --bs-list-group-border-color: var(--mh-line);
    --bs-list-group-action-hover-bg: rgba(47, 139, 255, .14);
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-active-bg: var(--mh-blue);
    --bs-list-group-active-border-color: var(--mh-blue);
}

/* --------------------------------------------------------------------------
   Botoes Cadastro / Downloads do topo no formato inclinado do slide
   (mesmas cores; a forma fica num ::before inclinado para a borda azul
   aparecer tambem nas laterais diagonais)
   -------------------------------------------------------------------------- */
.mh-cta {
    clip-path: none;
    background: none;
    border: 0;
    box-shadow: none;
    isolation: isolate;
    padding: 16px 36px;
}
.mh-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-16deg);
    background: linear-gradient(180deg, rgba(9, 22, 44, .92), rgba(4, 9, 18, .92));
    border: 1px solid rgba(47, 139, 255, .6);
    box-shadow: inset 0 0 22px rgba(47, 139, 255, .25), 0 6px 20px rgba(0, 0, 0, .45);
    transition: background .2s ease, box-shadow .2s ease;
}
.mh-cta:hover { background: none; box-shadow: none; }
.mh-cta:hover::before {
    background: linear-gradient(180deg, rgba(25, 80, 170, .95), rgba(8, 26, 60, .95));
    box-shadow: inset 0 0 30px rgba(47, 139, 255, .55), 0 0 22px rgba(47, 139, 255, .35);
}
@media (max-width: 767.98px) {
    .mh-cta { padding: 12px 22px; }
    .mh-cta::before { transform: skewX(-12deg); }
}

/* --------------------------------------------------------------------------
   Redes sociais (home) — blocos inclinados no mesmo estilo dos botoes
   -------------------------------------------------------------------------- */
.mh-social {
    top: 30px;
    height: auto;
    background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(3, 6, 12, .78), rgba(3, 6, 12, 0)) !important;
    padding: 14px 0;
    gap: 18px;
}
.mh-social .social-icons { gap: 12px; }

.mh-social-label {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .32em;
    color: #d6e6fb;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    gap: 12px;
}
.mh-social-label:first-child::before,
.mh-social-label:last-child::after {
    content: "";
    width: 70px;
    height: 1px;
}
.mh-social-label:first-child::before { background: linear-gradient(90deg, rgba(47, 139, 255, 0), rgba(47, 139, 255, .8)); }
.mh-social-label:last-child::after { background: linear-gradient(90deg, rgba(47, 139, 255, .8), rgba(47, 139, 255, 0)); }

.mh-social-link {
    position: relative;
    isolation: isolate;
    width: 48px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dbe8fb;
    transition: color .2s ease, transform .2s ease;
}
.mh-social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-16deg);
    background: linear-gradient(180deg, rgba(9, 22, 44, .92), rgba(4, 9, 18, .92));
    border: 1px solid rgba(47, 139, 255, .6);
    box-shadow: inset 0 0 14px rgba(47, 139, 255, .25), 0 6px 16px rgba(0, 0, 0, .45);
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mh-social-link svg { width: 20px; height: 20px; fill: currentColor; }
.mh-social-link svg[fill="none"] { fill: none; }
.mh-social-link:hover { color: #fff; transform: translateY(-3px); }
.mh-social-link:hover::before {
    background: linear-gradient(180deg, #3d95ff, #1557c0);
    border-color: #8cc4ff;
    box-shadow: 0 0 22px rgba(47, 139, 255, .7);
}
.mh-social-link img { display: none; }

@media (max-width: 575.98px) {
    .mh-social-label { display: none; }
}

/* credito do rodape */
.mh-credit {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mh-muted);
}
.mh-credit strong {
    font-family: var(--mh-head);
    font-weight: 700;
    letter-spacing: .18em;
    color: #fff;
    text-shadow: 0 0 10px rgba(47, 139, 255, .7);
}
.mh-credit a { text-decoration: none; }
.mh-credit a:hover strong { color: var(--mh-blue-light); text-shadow: 0 0 14px rgba(47, 139, 255, 1); }

/* credito v2: "Desenvolvido por" igual ao resto dos creditos, MK DESIGN em destaque */
.mh-credit {
    font: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    margin-top: 4px;
}
.mh-credit a {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    padding: 2px 12px;
    text-decoration: none;
    isolation: isolate;
}
.mh-credit a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-16deg);
    background: linear-gradient(180deg, rgba(9, 22, 44, .9), rgba(4, 9, 18, .9));
    border: 1px solid rgba(47, 139, 255, .75);
    box-shadow: 0 0 12px rgba(47, 139, 255, .45), inset 0 0 10px rgba(47, 139, 255, .3);
    animation: mh-credit-pulse 2.6s ease-in-out infinite;
}
.mh-credit strong {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .2em;
    background: linear-gradient(100deg, #8cc4ff 0%, #ffffff 40%, #2f8bff 55%, #ffffff 70%, #8cc4ff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(47, 139, 255, .8));
    animation: mh-credit-shine 3.5s linear infinite;
}
.mh-credit a:hover::before {
    background: linear-gradient(180deg, #3d95ff, #1557c0);
    border-color: #8cc4ff;
    box-shadow: 0 0 22px rgba(47, 139, 255, .9);
}
.mh-credit a:hover strong { color: transparent; text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .9)); }

@keyframes mh-credit-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes mh-credit-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(47, 139, 255, .35), inset 0 0 10px rgba(47, 139, 255, .25); }
    50%      { box-shadow: 0 0 22px rgba(47, 139, 255, .75), inset 0 0 14px rgba(47, 139, 255, .45); }
}
@media (prefers-reduced-motion: reduce) {
    .mh-credit a::before, .mh-credit strong { animation: none; }
}

/* credito v3: MK DESIGN volta ao texto branco simples, com brilho pulsando suave */
.mh-credit a { padding: 0; margin-left: 2px; }
.mh-credit a::before { content: none; display: none; }
.mh-credit strong {
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .18em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
    filter: none;
    text-shadow: 0 0 6px rgba(47, 139, 255, .6);
    animation: mh-credit-glow 2.8s ease-in-out infinite;
}
.mh-credit a:hover strong {
    color: #fff;
    filter: none;
    animation-play-state: paused;
    text-shadow: 0 0 6px #fff, 0 0 16px rgba(47, 139, 255, 1), 0 0 30px rgba(47, 139, 255, .9);
}
@keyframes mh-credit-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(47, 139, 255, .45), 0 0 8px rgba(47, 139, 255, .25); color: #e6f0ff; }
    50%      { text-shadow: 0 0 6px rgba(255, 255, 255, .8), 0 0 14px rgba(47, 139, 255, .95), 0 0 26px rgba(47, 139, 255, .6); color: #ffffff; }
}
@media (prefers-reduced-motion: reduce) { .mh-credit strong { animation: none; } }

/* --------------------------------------------------------------------------
   Minha Conta > Meus Personagens: avatar centralizado na borda da faixa azul
   -------------------------------------------------------------------------- */
.character-card-cover { height: 60px; }
.character-card-avatar {
    margin-top: -42px;
    padding: 0;
}
.character-card-avatar img {
    width: 84px;
    height: 84px;
    max-height: none;
    object-fit: cover;
    background: #07101e;
    border: 2px solid var(--mh-blue);
    box-shadow: 0 0 0 4px var(--mh-panel-solid), 0 0 18px rgba(47, 139, 255, .55);
    filter: none;
}
.character-card-body { padding-top: .75rem; }
/* avatar abaixo da faixa azul (sem sobrepor) */
.character-card-avatar { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Ultimas noticias: data grande + etiqueta colorida da categoria + titulo + seta
   -------------------------------------------------------------------------- */
.posts-post.mh-post {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--mh-line);
    transition: background .15s ease;
}
.posts-post.mh-post:last-child { border-bottom: 0; }
.posts-post.mh-post:hover { background: linear-gradient(90deg, rgba(47, 139, 255, .12), rgba(47, 139, 255, 0) 70%); }

.mh-post-date {
    flex: 0 0 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-family: var(--mh-head);
    font-weight: 700;
    color: #fff;
}
.mh-post-day { font-size: 28px; letter-spacing: .02em; }
.mh-post-month { font-size: 12px; letter-spacing: .14em; color: #b9cce6; margin-top: 3px; }

.mh-post-tag { flex: 0 0 auto; display: flex; position: relative; z-index: 2; }
.mh-post-tag .badge,
.mh-post-tag > span,
.mh-post-tag > a {
    display: inline-block;
    min-width: 96px;
    padding: 5px 10px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--mh-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #fff;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .25);
}
/* categoria cadastrada com cor branca/clara: texto escuro para continuar legivel */
.mh-post-tag [style*="#fff" i],
.mh-post-tag [style*="255, 255, 255"],
.mh-post-tag [style*="white" i] { color: #0a111a !important; text-shadow: none; }

.mh-post-image { flex: 0 0 64px; width: 64px; margin: 0; }
.mh-post-image img { border: 1px solid var(--mh-line); }

.mh-post-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.posts-post .mh-post-title {
    font-family: var(--mh-head);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    text-decoration: none;
}
.posts-post .mh-post-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.posts-post .mh-post-title:hover { color: var(--mh-blue-light); }
.mh-post-desc { margin: 0; font-size: 12px; color: var(--mh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mh-post-arrow { flex: 0 0 auto; font-size: 22px !important; color: #b9cce6; transition: transform .15s ease, color .15s ease; }
.mh-post:hover .mh-post-arrow { color: var(--mh-blue); transform: translateX(3px); }

@media (max-width: 575.98px) {
    .posts-post.mh-post { gap: 10px; padding: 12px 8px !important; flex-wrap: wrap; }
    .mh-post-tag { order: 3; margin-left: 56px; }
    .mh-post-content { flex-basis: calc(100% - 100px); }
    .mh-post-arrow { display: none; }
}