/* =========================================================
   TEMA GLOBAL — SISTEMA TECNOLÓGICO AZUL
   Mais “tela de jogo / sistema / chip”, com botões mais
   futuristas e fundo puxado para o azul.
   ========================================================= */

:root{
    --sys-bg-dark:#071a2e;
    --sys-bg-mid:#0f3054;
    --sys-bg-soft:#163f73;
    --sys-panel:#12395d;
    --sys-panel-soft:rgba(18,57,93,.80);
    --sys-line:#43cfff;
    --sys-line-soft:rgba(67,207,255,.42);
    --sys-line-faint:rgba(67,207,255,.14);
    --sys-glow:rgba(67,207,255,.18);
    --sys-glow-strong:rgba(67,207,255,.32);
    --sys-text:#dff8ff;
    --sys-border:#7de8ff;
    --sys-border-soft:rgba(125,232,255,.42);
    --sys-cyan:#7de8ff;
    --sys-cyan-2:#1db5ff;
    --sys-gold:#ead6ab;
    --sys-gold-soft:rgba(234,214,171,.45);
}

/* ---------------------------------------------------------
   FUNDO GERAL
   --------------------------------------------------------- */

html, body{
    background-color:#071727;
}

body{
    position:relative;
    overflow-x:hidden;
}

/* laterais mais tecnológicas */
html::before,
html::after{
    content:"";
    position:fixed;
    top:0;
    bottom:0;
    width:clamp(54px, 6vw, 92px);
    z-index:9990;
    pointer-events:none;
    opacity:.96;
    background:
        /* trilhas de chip */
        repeating-linear-gradient(
            180deg,
            rgba(125,232,255,.20) 0 2px,
            transparent 2px 18px
        ),
        repeating-linear-gradient(
            180deg,
            transparent 0 24px,
            rgba(125,232,255,.12) 24px 28px,
            transparent 28px 54px
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,0) 12%,
            rgba(67,207,255,.08) 34%,
            rgba(67,207,255,.05) 66%,
            rgba(255,255,255,0) 90%
        ),
        linear-gradient(
            90deg,
            rgba(6,20,38,.98) 0%,
            rgba(10,38,70,.96) 22%,
            rgba(17,76,131,.88) 60%,
            rgba(85,227,255,.46) 94%,
            rgba(125,232,255,.82) 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(125,232,255,.34),
        inset 0 0 24px rgba(67,207,255,.18),
        0 0 26px rgba(7,35,68,.25);

    clip-path:polygon(
        0 0,
        76% 0,
        100% 4%,
        100% 14%,
        86% 18%,
        86% 28%,
        100% 31%,
        100% 69%,
        86% 72%,
        86% 82%,
        100% 86%,
        100% 96%,
        76% 100%,
        0 100%,
        0 84%,
        18% 80%,
        18% 20%,
        0 16%
    );
}

html::before{ left:0; }
html::after{
    right:0;
    transform:scaleX(-1);
}

/* linhas luminosas de “placa/chip” */
body::before,
body::after{
    content:"";
    position:fixed;
    top:8vh;
    bottom:8vh;
    width:20px;
    z-index:9991;
    pointer-events:none;
    opacity:.92;
    background:
        linear-gradient(180deg, transparent, rgba(67,207,255,.24) 6%, rgba(67,207,255,.12) 94%, transparent),
        repeating-linear-gradient(180deg, rgba(125,232,255,.75) 0 7px, transparent 7px 20px),
        linear-gradient(90deg, rgba(125,232,255,.95), rgba(125,232,255,.18));
    filter: drop-shadow(0 0 8px rgba(67,207,255,.22));
}

body::before{
    left:clamp(18px,2vw,34px);
    clip-path:polygon(0 0,55% 0,55% 18%,100% 18%,100% 26%,55% 26%,55% 60%,80% 60%,80% 68%,55% 68%,55% 100%,0 100%);
}

body::after{
    right:clamp(18px,2vw,34px);
    transform:scaleX(-1);
    clip-path:polygon(0 0,55% 0,55% 18%,100% 18%,100% 26%,55% 26%,55% 60%,80% 60%,80% 68%,55% 68%,55% 100%,0 100%);
}

/* sobreposição azul no fundo, mantendo a imagem central */
.background-shade{
    background:
        radial-gradient(circle at 50% 18%, rgba(77,162,255,.15), transparent 26%),
        linear-gradient(
            90deg,
            rgba(3,13,25,.82) 0%,
            rgba(8,33,56,.48) 16%,
            rgba(15,54,96,.14) 32%,
            rgba(255,255,255,0) 47%,
            rgba(255,255,255,0) 53%,
            rgba(15,54,96,.14) 68%,
            rgba(8,33,56,.48) 84%,
            rgba(3,13,25,.82) 100%
        ) !important;
}

/* ---------------------------------------------------------
   CONTAINERS / MOLDURAS
   --------------------------------------------------------- */

:is(
    .admin-panel,
    .content-admin-panel,
    .edit-panel,
    .details-panel,
    .player-panel,
    .login-panel,
    .settings-panel,
    .maintenance-panel,
    .operations-panel,
    .rpg-info-shell,
    .page-content,
    .my-page-header,
    .character-sheet,
    .presentation-panel,
    .search-panel,
    .create-panel,
    .player-sheet
){
    position:relative;
    border-radius:10px !important;
    border:1px solid rgba(125,232,255,.54) !important;
    background:
        linear-gradient(145deg, rgba(10,36,61,.88), rgba(19,58,97,.84), rgba(16,82,128,.42)) !important;
    box-shadow:
        0 18px 48px rgba(4,18,32,.42),
        inset 0 0 0 1px rgba(255,255,255,.05),
        inset 0 0 30px rgba(67,207,255,.06),
        0 0 0 1px rgba(67,207,255,.07) !important;
    overflow:hidden;
}

:is(
    .admin-panel,
    .content-admin-panel,
    .edit-panel,
    .details-panel,
    .player-panel,
    .login-panel,
    .settings-panel,
    .maintenance-panel,
    .operations-panel,
    .rpg-info-shell,
    .page-content,
    .my-page-header,
    .character-sheet,
    .presentation-panel,
    .search-panel,
    .create-panel,
    .player-sheet
)::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(125,232,255,.14);
    clip-path:polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
    pointer-events:none;
}

:is(
    .admin-panel,
    .content-admin-panel,
    .edit-panel,
    .details-panel,
    .player-panel,
    .login-panel,
    .settings-panel,
    .maintenance-panel,
    .operations-panel,
    .rpg-info-shell,
    .page-content,
    .my-page-header,
    .character-sheet,
    .presentation-panel,
    .search-panel,
    .create-panel,
    .player-sheet
)::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(135deg, rgba(125,232,255,.08), transparent 18%),
        linear-gradient(315deg, rgba(125,232,255,.06), transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 14%);
}

/* ---------------------------------------------------------
   CAIXAS CLARAS / BLOCOS DE TEXTO
   --------------------------------------------------------- */

:is(
    .rpg-content-block,
    .rpg-content-empty,
    .content-box,
    .identity-card,
    .summary-item,
    .attribute-card,
    .system-card,
    .progress-card,
    .mastery-card,
    .public-realm-card,
    .public-level-category,
    .generic-table-card,
    .table-card,
    .requirements-import-card,
    .category-visibility-card,
    .table-appearance-card,
    .owner-type-box,
    .pending-panel,
    .whatsapp-section,
    .info-item,
    .nucleus-item,
    .realm-card,
    .mastery-item
){
    position:relative;
    border-radius:7px !important;
    border:1px solid rgba(125,232,255,.36) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 12px 0 18px -18px rgba(67,207,255,.65),
        inset -12px 0 18px -18px rgba(67,207,255,.65),
        0 8px 20px rgba(4,18,32,.14) !important;
    overflow:hidden;
}

:is(
    .rpg-content-block,
    .content-box,
    .public-realm-card,
    .generic-table-card,
    .table-card
)::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(135deg, rgba(67,207,255,.08), transparent 22%),
        linear-gradient(315deg, rgba(67,207,255,.05), transparent 18%),
        repeating-linear-gradient(
            90deg,
            transparent 0 46px,
            rgba(67,207,255,.06) 46px 47px,
            transparent 47px 92px
        ),
        repeating-linear-gradient(
            180deg,
            transparent 0 34px,
            rgba(67,207,255,.04) 34px 35px,
            transparent 35px 70px
        );
}

/* ---------------------------------------------------------
   TÍTULOS
   --------------------------------------------------------- */

:is(h1,h2,h3,.eyebrow,.section-heading h2,.rpg-info-topbar h1,.rpg-related-sidebar-title,.public-levels-heading h2){
    color:#e6f8ff !important;
    text-shadow:
        0 0 12px rgba(67,207,255,.18),
        0 1px 0 rgba(255,255,255,.04);
    letter-spacing:.04em;
}

.section-heading::after{
    background:
        linear-gradient(90deg, rgba(125,232,255,.72), rgba(67,207,255,.28), transparent) !important;
}

/* ---------------------------------------------------------
   BOTÕES — mais parecidos com interface futurista da imagem
   --------------------------------------------------------- */

:is(
    button,
    .secondary-button,
    .back-button,
    .top-back-button,
    .copy-button,
    .save-page-button,
    .admin-secondary-button,
    .rpg-info-small-button,
    .rpg-info-link-button,
    .admin-menu a,
    .admin-menu button
){
    position:relative;
    border-radius:4px !important;
    border:1px solid rgba(125,232,255,.72) !important;
    color:#effbff !important;
    background:
        linear-gradient(180deg, rgba(33,111,173,.92), rgba(10,63,108,.96)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        inset 0 12px 18px rgba(255,255,255,.05),
        0 0 0 1px rgba(31,146,224,.24),
        0 8px 18px rgba(3,14,27,.24),
        0 0 20px rgba(67,207,255,.12) !important;
    clip-path: polygon(
        0 8px,
        8px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        10px 100%,
        0 calc(100% - 10px)
    );
    overflow:hidden;
}

:is(
    button,
    .secondary-button,
    .back-button,
    .top-back-button,
    .copy-button,
    .save-page-button,
    .admin-secondary-button,
    .rpg-info-small-button,
    .rpg-info-link-button,
    .admin-menu a,
    .admin-menu button
)::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.20), transparent 28%, transparent 72%, rgba(255,255,255,.10)),
        repeating-linear-gradient(
            90deg,
            transparent 0 16px,
            rgba(125,232,255,.05) 16px 17px,
            transparent 17px 34px
        );
    pointer-events:none;
}

:is(
    button,
    .secondary-button,
    .back-button,
    .top-back-button,
    .copy-button,
    .save-page-button,
    .admin-secondary-button,
    .rpg-info-small-button,
    .rpg-info-link-button,
    .admin-menu a,
    .admin-menu button
)::after{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(125,232,255,.18);
    clip-path: polygon(
        0 6px,
        6px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
    pointer-events:none;
}

:is(
    button,
    .secondary-button,
    .back-button,
    .top-back-button,
    .copy-button,
    .save-page-button,
    .admin-secondary-button,
    .rpg-info-small-button,
    .rpg-info-link-button,
    .admin-menu a,
    .admin-menu button
):hover{
    transform:translateY(-1px);
    border-color:rgba(173,244,255,.95) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 12px 18px rgba(255,255,255,.07),
        0 0 0 1px rgba(31,146,224,.30),
        0 12px 22px rgba(3,14,27,.30),
        0 0 26px rgba(67,207,255,.22) !important;
}

/* ---------------------------------------------------------
   TABELAS
   --------------------------------------------------------- */

table{
    border-radius:4px !important;
    overflow:hidden;
    border:1px solid rgba(125,232,255,.32) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 8px 18px rgba(4,18,32,.16);
}

table thead th{
    color:#d7f8ff !important;
    border-color:rgba(67,207,255,.22) !important;
    background:
        linear-gradient(
            180deg,
            rgba(20,77,125,.96),
            rgba(13,56,99,.94)
        ) !important;
    box-shadow: inset 0 -1px 0 rgba(125,232,255,.18);
}

table td{
    border-color:rgba(67,207,255,.12) !important;
}

table tr:hover td{
    background-color:rgba(67,207,255,.05) !important;
}

/* ---------------------------------------------------------
   CAMPOS
   --------------------------------------------------------- */

:is(
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="file"],
    textarea,
    select
){
    border-radius:4px !important;
    border:1px solid rgba(125,232,255,.34) !important;
    box-shadow:
        inset 5px 0 0 -4px rgba(67,207,255,.50),
        inset 0 0 12px rgba(67,207,255,.04);
}

:is(
    input[type="text"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    textarea,
    select
):focus{
    border-color:rgba(125,232,255,.82) !important;
    box-shadow:
        inset 5px 0 0 -4px rgba(67,207,255,.80),
        0 0 0 2px rgba(67,207,255,.12) !important;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */

@media (max-width: 1080px){
    html::before,
    html::after{
        width:26px;
        opacity:.62;
    }

    body::before,
    body::after{
        display:none;
    }
}

@media (max-width: 560px){
    html::before,
    html::after{
        width:10px;
        opacity:.40;
    }
}


/* =========================================================
   HOME — CORREÇÃO ESPECÍFICA
   A Home usa classes próprias e por isso precisava de regras
   direcionadas. Estas regras têm prioridade sobre home.css.
   ========================================================= */

/* Fundo azul mantendo a imagem escolhida para a Home. */
.home{
    background-color:#071a2e !important;
}

.home .background-shade{
    background:
        radial-gradient(
            circle at 52% 15%,
            rgba(76,158,255,.16),
            transparent 30%
        ),
        linear-gradient(
            90deg,
            rgba(3,13,25,.86) 0%,
            rgba(7,29,52,.56) 14%,
            rgba(14,55,98,.18) 31%,
            rgba(10,42,78,.08) 48%,
            rgba(10,42,78,.08) 52%,
            rgba(14,55,98,.18) 69%,
            rgba(7,29,52,.56) 86%,
            rgba(3,13,25,.86) 100%
        ) !important;
}

/* Moldura tecnológica do menu esquerdo. */
.home .side-menu{
    position:relative !important;
    border-radius:6px !important;
    border:1px solid rgba(125,232,255,.72) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,44,73,.93),
            rgba(16,71,111,.88),
            rgba(13,96,138,.48)
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        inset 0 0 28px rgba(67,207,255,.08),
        0 14px 34px rgba(2,13,26,.34),
        0 0 18px rgba(67,207,255,.10) !important;

    clip-path:polygon(
        0 16px,
        16px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        14px 100%,
        0 calc(100% - 14px)
    );

    overflow:hidden !important;
}

.home .side-menu::before{
    content:"" !important;
    position:absolute !important;
    inset:9px !important;
    z-index:0 !important;
    pointer-events:none !important;

    border:1px solid rgba(125,232,255,.18) !important;

    background:
        linear-gradient(135deg,rgba(125,232,255,.07),transparent 28%),
        linear-gradient(315deg,rgba(125,232,255,.05),transparent 25%),
        repeating-linear-gradient(
            90deg,
            transparent 0 28px,
            rgba(67,207,255,.055) 28px 29px,
            transparent 29px 58px
        ) !important;

    clip-path:polygon(
        0 9px,
        9px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        9px 100%,
        0 calc(100% - 9px)
    );
}

.home .side-menu::after{
    content:"" !important;
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:13px !important;
    height:7px !important;
    z-index:0 !important;
    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            rgba(125,232,255,.80),
            rgba(67,207,255,.18) 18%,
            transparent 18% 28%,
            rgba(67,207,255,.42) 28% 52%,
            transparent 52% 65%,
            rgba(125,232,255,.60) 65% 100%
        ) !important;

    opacity:.70 !important;
}

/* Garante que conteúdo fique acima das linhas internas. */
.home .menu-header,
.home .menu-links{
    position:relative !important;
    z-index:2 !important;
}

.home .menu-header h1{
    color:#e9fbff !important;
    text-shadow:0 0 14px rgba(67,207,255,.20) !important;
}

.home .menu-header p{
    color:rgba(222,247,255,.76) !important;
}

/* ---------------------------------------------------------
   BOTÕES DA HOME — estilo HUD / painel de jogo
   --------------------------------------------------------- */

.home .menu-button{
    position:relative !important;
    min-height:56px !important;

    border-radius:0 !important;
    border:1px solid rgba(125,232,255,.78) !important;

    background:
        linear-gradient(
            180deg,
            rgba(31,112,175,.94),
            rgba(8,55,98,.98)
        ) !important;

    color:#f1fcff !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        inset 0 12px 18px rgba(255,255,255,.035),
        0 7px 18px rgba(2,12,24,.30),
        0 0 16px rgba(67,207,255,.11) !important;

    clip-path:polygon(
        0 10px,
        10px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        14px 100%,
        0 calc(100% - 14px)
    );

    overflow:hidden !important;
}

.home .menu-button::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.18),
            transparent 27%,
            transparent 73%,
            rgba(125,232,255,.09)
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(125,232,255,.07) 18px 19px,
            transparent 19px 37px
        ) !important;
}

.home .menu-button::after{
    content:"" !important;
    position:absolute !important;
    inset:6px !important;
    pointer-events:none !important;

    border:1px solid rgba(125,232,255,.22) !important;

    clip-path:polygon(
        0 6px,
        6px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        8px 100%,
        0 calc(100% - 8px)
    );
}

.home .menu-button:hover{
    transform:translateX(4px) !important;

    background:
        linear-gradient(
            180deg,
            rgba(42,139,207,.98),
            rgba(11,72,122,.98)
        ) !important;

    border-color:rgba(183,249,255,.98) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.09),
        0 10px 23px rgba(2,12,24,.34),
        0 0 24px rgba(67,207,255,.22) !important;
}

/* ---------------------------------------------------------
   CAIXA GRANDE DE APRESENTAÇÃO
   --------------------------------------------------------- */

.home .rpg-description-box{
    position:relative !important;

    padding:13px !important;

    border-radius:7px !important;
    border:1px solid rgba(125,232,255,.68) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,42,72,.94),
            rgba(19,71,111,.88),
            rgba(14,98,139,.43)
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        inset 0 0 28px rgba(67,207,255,.06),
        0 17px 38px rgba(2,13,26,.32),
        0 0 18px rgba(67,207,255,.09) !important;

    clip-path:polygon(
        0 18px,
        18px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        15px 100%,
        0 calc(100% - 15px)
    );

    overflow:hidden !important;
}

.home .rpg-description-box::before{
    content:"" !important;
    position:absolute !important;
    inset:8px !important;
    pointer-events:none !important;
    z-index:1 !important;

    border:1px solid rgba(125,232,255,.16) !important;

    background:
        linear-gradient(135deg,rgba(67,207,255,.07),transparent 23%),
        linear-gradient(315deg,rgba(67,207,255,.05),transparent 20%) !important;

    clip-path:polygon(
        0 11px,
        11px 0,
        calc(100% - 11px) 0,
        100% 11px,
        100% calc(100% - 11px),
        calc(100% - 11px) 100%,
        11px 100%,
        0 calc(100% - 11px)
    );
}

/* Conteúdo claro continua legível, mas com borda de sistema. */
.home .rpg-description{
    position:relative !important;
    z-index:2 !important;

    border-radius:5px !important;
    border:1px solid rgba(125,232,255,.22) !important;

    background:
        linear-gradient(
            160deg,
            rgba(244,246,231,.95),
            rgba(229,236,220,.93)
        ) !important;

    box-shadow:
        inset 0 0 34px rgba(32,91,111,.08),
        inset 7px 0 0 -6px rgba(67,207,255,.28),
        inset -7px 0 0 -6px rgba(67,207,255,.20) !important;
}

/* ---------------------------------------------------------
   ÁREA DO TÍTULO/BANNER SUPERIOR
   --------------------------------------------------------- */

.home .rpg-title-area,
.home .rpg-logo-area{
    position:relative !important;
}

/* Não altera o banner/imagem que o usuário já configurou.
   Só adiciona linha luminosa inferior quando existir. */
.home .rpg-title-area::after{
    content:"" !important;
    position:absolute !important;
    left:8% !important;
    right:8% !important;
    bottom:3px !important;
    height:1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(125,232,255,.55) 18%,
            rgba(125,232,255,.18) 50%,
            rgba(125,232,255,.55) 82%,
            transparent
        ) !important;

    box-shadow:0 0 8px rgba(67,207,255,.16) !important;
}

/* ---------------------------------------------------------
   LINHAS DE CIRCUITO DECORATIVAS NO FUNDO DA HOME
   --------------------------------------------------------- */

.home::before,
.home::after{
    content:"" !important;
    position:absolute !important;
    pointer-events:none !important;
    z-index:1 !important;
    opacity:.52 !important;
}

.home::before{
    left:0 !important;
    top:22% !important;
    width:23vw !important;
    height:42vh !important;

    background:
        linear-gradient(90deg, rgba(67,207,255,.34) 0 2px, transparent 2px),
        linear-gradient(180deg, transparent 0 28%, rgba(67,207,255,.26) 28% 29%, transparent 29%),
        linear-gradient(135deg, transparent 0 46%, rgba(67,207,255,.20) 46% 47%, transparent 47%) !important;

    clip-path:polygon(0 8%,70% 8%,70% 26%,100% 26%,100% 28%,72% 28%,72% 63%,88% 63%,88% 65%,70% 65%,70% 92%,0 92%) !important;
}

.home::after{
    right:0 !important;
    bottom:10% !important;
    width:23vw !important;
    height:42vh !important;

    background:
        linear-gradient(90deg, transparent calc(100% - 2px), rgba(67,207,255,.34) calc(100% - 2px)),
        linear-gradient(180deg, transparent 0 36%, rgba(67,207,255,.24) 36% 37%, transparent 37%),
        linear-gradient(45deg, transparent 0 46%, rgba(67,207,255,.18) 46% 47%, transparent 47%) !important;

    clip-path:polygon(30% 8%,100% 8%,100% 92%,30% 92%,30% 68%,0 68%,0 66%,28% 66%,28% 30%,10% 30%,10% 28%,30% 28%) !important;
}

/* Home content above decorative circuits. */
.home > *{
    position:relative;
}

.home .background-shade{
    position:absolute !important;
}

@media(max-width:900px){
    .home::before,
    .home::after{
        display:none !important;
    }

    .home .side-menu,
    .home .rpg-description-box{
        clip-path:none !important;
    }
}


/* =========================================================
   HOME — BANNER/TÍTULO OCUPANDO TODA A FAIXA SUPERIOR
   ========================================================= */

/*
   A imagem Beyond the Heavens é tratada como o banner principal.
   Ela ocupa toda a primeira linha da Home, de uma lateral à outra
   dentro da área útil da página.
*/
.home{
    grid-template-areas:
        "logo logo logo"
        "menu description description" !important;
}

/* O banner/logo passa a ocupar toda a largura superior. */
.home .rpg-logo-area{
    grid-area:logo !important;
    grid-column:1 / -1 !important;
    grid-row:1 !important;

    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;

    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;

    border:0 !important;
    border-radius:12px !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:hidden !important;
}

/* Retira a moldura antiga tracejada do logo. */
.home .rpg-logo-area::before{
    display:none !important;
}

/* A imagem realmente preenche a faixa, sem ficar pequena no canto. */
.home .rpg-logo{
    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center !important;

    border-radius:12px !important;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.34)) !important;
}

/*
   Se ainda houver título textual configurado no sistema,
   ele fica sobreposto ao banner, em vez de reservar outra coluna
   e desalinhá-lo.
*/
.home .rpg-title-area{
    grid-area:unset !important;

    position:absolute !important;
    top:clamp(28px,3.5vh,46px) !important;
    left:5vw !important;
    right:5vw !important;

    width:auto !important;
    height:clamp(175px,22vh,225px) !important;

    padding:
        8px
        clamp(24px,4vw,62px) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    z-index:4 !important;
    pointer-events:none !important;
}

/* Imagens eventualmente usadas dentro da área de título também
   passam a preencher toda a largura. */
.home .rpg-title-area img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
}

/* Caso o título textual esteja vazio, ele não cria espaço visual. */
.home .rpg-title:empty{
    display:none !important;
}

@media(max-width:900px){
    .home .rpg-logo-area{
        order:1 !important;
        width:100% !important;
        height:clamp(120px,26vw,180px) !important;
    }

    .home .rpg-title-area{
        order:1 !important;
        position:absolute !important;
        top:24px !important;
        left:20px !important;
        right:20px !important;
        height:clamp(120px,26vw,180px) !important;
        min-height:0 !important;
        width:auto !important;
    }

    .home .side-menu{
        order:2 !important;
    }

    .home .rpg-description-box{
        order:3 !important;
    }
}