/* ==========================================================================
   GUNBOUND SEASON 2 — TEMA SAZONAL DE HALLOWEEN (OUTUBRO)

   Regras deste tema:
   - NÃO muda layout: nenhuma largura, altura, margem, padding ou posição de
     componente. Só cor, textura, brilho e decorações em pseudo-elementos.
   - Reaproveita o vocabulário clássico do site (listras, brilho "glossy",
     sombra 3D, moldura bege) recolorido: a moldura bege vira "osso", o ciano
     vira abóbora e o azul vira roxo-noite.
   - Conteúdo das páginas internas continua claro (legibilidade das tabelas,
     formulários e cards); o tema atua na moldura, no céu e nos widgets.
   - Títulos sobre cabeçalhos coloridos mantêm o contorno escuro/claro original.
   - Animações só em transform/opacity e desligadas em prefers-reduced-motion.

   Ativação: index.php ($theme_halloween_mode no config.php, ou ?halloween=1).
   Ver: _Mega-Brain/50-Frontend/Design-System-GB.md
   ========================================================================== */

body.theme-halloween {
    --hw-noite-1: #120a24;
    --hw-noite-2: #1d1036;
    --hw-roxo: #3b1d63;
    --hw-roxo-medio: #5a2d91;
    --hw-roxo-claro: #8a5bd6;

    --hw-abobora: #ff7a1a;
    --hw-abobora-clara: #ffb15c;
    --hw-abobora-escura: #c24a00;
    --hw-abobora-brilho: rgba(255, 122, 26, 0.45);

    --hw-osso: #efe3c4;        /* substitui a moldura bege clássica #D1DABB */
    --hw-osso-escuro: #b9a67a;
    --hw-limo: #8bff3a;
    --hw-sangue: #a81f26;
    --hw-texto: #f3ecff;
}

/* ==========================================================================
   1. CÉU NOTURNO
   Estrelas + véu noturno TRANSLÚCIDO sobre o bg.png: as nuvens clássicas
   continuam visíveis. background-color escuro cobre a página inteira (antes
   o fundo acabava na altura da imagem e o resto da página ficava branco).
   ========================================================================== */

body.theme-halloween {
    background-color: var(--hw-noite-1);
    background-image:
        radial-gradient(1.4px 1.4px at 18px 30px, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
        radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.7) 50%, transparent 52%),
        radial-gradient(1.8px 1.8px at 200px 20px, rgba(255, 240, 200, 0.9) 50%, transparent 52%),
        radial-gradient(1px 1px at 60px 150px, rgba(255, 255, 255, 0.6) 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 170px 130px, rgba(255, 255, 255, 0.75) 50%, transparent 52%),
        linear-gradient(180deg,
            rgba(18, 10, 36, 0.88) 0%,
            rgba(42, 20, 74, 0.78) 28%,
            rgba(110, 40, 60, 0.55) 52%,
            rgba(255, 122, 26, 0.18) 64%,
            rgba(29, 16, 54, 0.92) 82%,
            var(--hw-noite-1) 100%),
        url('../images/bg.png');
    background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, repeat-x;
    background-size: 240px 180px, 240px 180px, 240px 180px, 240px 180px, 240px 180px, 100% 1100px, contain;
    background-position: top center;
    color: var(--hw-texto);
}

body.theme-halloween ::selection {
    background: var(--hw-abobora);
    color: #1a0b00;
}

/* Scrollbar */
body.theme-halloween::-webkit-scrollbar {
    width: 10px;
}

body.theme-halloween::-webkit-scrollbar-track {
    background: var(--hw-noite-1);
}

body.theme-halloween::-webkit-scrollbar-thumb {
    background: var(--hw-roxo-medio);
    border-radius: 5px;
    border: 2px solid var(--hw-noite-1);
}

body.theme-halloween::-webkit-scrollbar-thumb:hover {
    background: var(--hw-abobora-escura);
}

/* Lua: crateras + halo. Absoluta (rola com a página), atrás de todo o conteúdo. */
body.theme-halloween::before {
    content: "";
    position: absolute;
    top: 16px;
    right: max(24px, calc(50% - 690px));
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 34%, rgba(214, 170, 80, 0.55) 0 7px, transparent 8px),
        radial-gradient(circle at 62% 60%, rgba(214, 170, 80, 0.45) 0 10px, transparent 11px),
        radial-gradient(circle at 70% 28%, rgba(214, 170, 80, 0.4) 0 4px, transparent 5px),
        radial-gradient(circle at 40% 40%, #fffbe6 0%, #ffe9a8 45%, #f5c451 100%);
    box-shadow:
        0 0 24px rgba(255, 226, 140, 0.55),
        0 0 70px rgba(255, 150, 40, 0.35),
        inset -10px -8px 18px rgba(170, 110, 20, 0.45);
    pointer-events: none;
    z-index: -1;
}

/* Morcegos voando diante da lua (silhueta escura só tem contraste sobre ela).
   Uma camada só, animada por transform. */
body.theme-halloween > header {
    position: relative;
}

body.theme-halloween > header::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 110px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23100820' d='M32 13c-1-3-3-5-5-6 1 3 0 5-2 6-4-4-11-5-20-2 5 2 8 6 8 11 3-3 7-3 10 0 1-3 4-4 7-2l2 6 2-6c3-2 6-1 7 2 3-3 7-3 10 0 0-5 3-9 8-11-9-3-16-2-20 2-2-1-3-3-2-6-2 1-4 3-5 6z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23100820' d='M32 13c-1-3-3-5-5-6 1 3 0 5-2 6-4-4-11-5-20-2 5 2 8 6 8 11 3-3 7-3 10 0 1-3 4-4 7-2l2 6 2-6c3-2 6-1 7 2 3-3 7-3 10 0 0-5 3-9 8-11-9-3-16-2-20 2-2-1-3-3-2-6-2 1-4 3-5 6z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23100820' d='M32 13c-1-3-3-5-5-6 1 3 0 5-2 6-4-4-11-5-20-2 5 2 8 6 8 11 3-3 7-3 10 0 1-3 4-4 7-2l2 6 2-6c3-2 6-1 7 2 3-3 7-3 10 0 0-5 3-9 8-11-9-3-16-2-20 2-2-1-3-3-2-6-2 1-4 3-5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 40px 20px, 26px 13px, 18px 9px;
    background-position: right max(46px, calc(50% - 668px)) top 36px,
                         right max(118px, calc(50% - 596px)) top 14px,
                         right max(96px, calc(50% - 618px)) top 84px;
    opacity: 0.9;
    pointer-events: none;
    z-index: -1;
    animation: hw-voo 14s ease-in-out infinite alternate;
}

@keyframes hw-voo {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-18px, 6px); }
    100% { transform: translate(-34px, -4px); }
}

/* ==========================================================================
   2. MENU SUPERIOR — moldura de osso + abóbora brilhante (mesma estrutura)
   ========================================================================== */

/* Moldura de osso com bisel: borda clara em cima, escura embaixo, filete
   escuro por fora e brilho de abóbora. Mesma espessura (5px) e mesmo raio. */
body.theme-halloween .flash-nav {
    border-color: #f7eed6 #e6d7b0 #c9b68a #e6d7b0;
    background: #e6d7b0; /* preenche a curva interna dos cantos */
    box-shadow:
        0 0 0 1px #5e4a26,
        0 0 0 4px rgba(239, 227, 196, 0.18),
        0 10px 24px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 122, 26, 0.35);
}

/* Item: abóbora acesa por dentro (luz quente vindo de baixo) com relevo interno */
body.theme-halloween .flash-nav > li > a {
    background:
        radial-gradient(120% 95% at 50% 125%, rgba(255, 214, 102, 0.55) 0%, rgba(255, 214, 102, 0) 60%),
        linear-gradient(180deg, #ffab57 0%, #ff8424 42%, #ec6406 72%, #c84d00 100%);
    color: #ffffff;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 #8a3300, 0 2px 4px rgba(90, 30, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 200, 0.55),
        inset 0 -2px 0 rgba(120, 40, 0, 0.35);
    transition: box-shadow 0.25s ease, color 0.2s ease, text-shadow 0.25s ease, background 0.25s ease;
}

/* Sulco esculpido entre os itens: linha escura + linha clara */
body.theme-halloween .flash-nav > li + li > a {
    box-shadow:
        inset 1px 0 0 rgba(110, 35, 0, 0.5),
        inset 2px 0 0 rgba(255, 220, 170, 0.35),
        inset 0 1px 0 rgba(255, 236, 200, 0.55),
        inset 0 -2px 0 rgba(120, 40, 0, 0.35);
}

/* Reflexo superior: faixa reta de ponta a ponta, sem arredondamento.
   Inclui primeiro/último item, que na base têm raio de 12px no reflexo. */
body.theme-halloween ul:not(.dropdown-menu).flash-nav > li::before,
body.theme-halloween ul.flash-nav > li:first-child::before,
body.theme-halloween ul.flash-nav > li:last-child::before {
    top: 0; /* colado no topo do botão */
    left: 0;
    width: 100%;
    height: 20px;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
}

/* Hover/foco: o item "acende" — a luz de baixo sobe e o texto ganha brilho de vela */
body.theme-halloween ul:not(.dropdown-menu).flash-nav > li > a:hover,
body.theme-halloween .flash-nav li.has-dropdown:hover > a,
body.theme-halloween .flash-nav > li > a:focus-visible {
    background:
        radial-gradient(130% 115% at 50% 118%, rgba(255, 240, 150, 0.9) 0%, rgba(255, 214, 102, 0) 64%),
        linear-gradient(180deg, #ffbd6e 0%, #ff9433 45%, #f27109 75%, #d35500 100%);
    color: #fffbe6;
    text-shadow: 0 1px 0 #8a3300, 0 0 10px rgba(255, 236, 150, 0.9);
}

body.theme-halloween .flash-nav > li > a:focus-visible {
    outline: 2px solid #fff36a;
    outline-offset: -5px;
}

/* Dropdown */
body.theme-halloween .flash-nav .dropdown-menu,
body.theme-halloween .dropdown-menu.drop-menu-guia,
body.theme-halloween .dropdown-menu.drop-menu-ranking {
    background-color: var(--hw-noite-2) !important; /* a base usa !important */
    border-color: var(--hw-abobora);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7), 0 0 16px var(--hw-abobora-brilho);
}

body.theme-halloween .flash-nav .dropdown-menu a:hover {
    color: var(--hw-abobora-clara);
    text-shadow: 0 0 8px var(--hw-abobora-brilho);
}

/* Logo com aura + abóbora (jack-o'-lantern) no canto */
body.theme-halloween .navbar-brand {
    position: relative;
}

/* Arte de Halloween no lugar das imagens padrão (assets/images/halloween/).
   content:url() troca o que o <img> exibe sem mexer no HTML; alt e tamanho
   continuam os mesmos, e sem o tema a imagem original volta sozinha. */
body.theme-halloween .navbar-brand img {
    content: url("../images/halloween/logogb.png");
}

body.theme-halloween .dragon-image {
    content: url("../images/halloween/download.png");
}

body.theme-halloween .navbar-brand img {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 16px var(--hw-abobora-brilho));
}

body.theme-halloween .navbar-brand::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 4px;
    width: 40px;
    height: 36px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 7c1-3 3-5 6-6' stroke='%232f6b1a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='22' rx='10' ry='12' fill='%23e85d04'/%3E%3Cellipse cx='28' cy='22' rx='10' ry='12' fill='%23e85d04'/%3E%3Cellipse cx='20' cy='22' rx='11' ry='13' fill='%23ff8a1f'/%3E%3Cpath d='M12 18l4-4 2 5zM28 18l-4-4-2 5z' fill='%23ffe066'/%3E%3Cpath d='M11 26q9 6 18 0l-3 1-2-2-2 3-2-3-2 2-3-1z' fill='%23ffe066'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.7));
    pointer-events: none;
    animation: hw-abobora 3.2s ease-in-out infinite;
}

@keyframes hw-abobora {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-4px) rotate(4deg); }
}

/* ==========================================================================
   3. PAINÉIS — teias de aranha nos cantos (só decoração)
   ========================================================================== */

body.theme-halloween .main-container-wrapper::before,
body.theme-halloween .main-container-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 46px;
    height: 46px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 11;
    opacity: 0.8;
}

body.theme-halloween .main-container-wrapper::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23efe3c4' stroke-width='2.5' stroke-opacity='0.55' d='M0,0 L100,0 M0,0 L0,100 M0,0 L85,85 M0,0 L50,90 M0,0 L90,50 M0,30 Q30,30 30,0 M0,60 Q60,60 60,0 M0,90 Q90,90 90,0'/%3E%3C/svg%3E");
}

body.theme-halloween .main-container-wrapper::after {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23efe3c4' stroke-width='2.5' stroke-opacity='0.55' d='M100,0 L0,0 M100,0 L100,100 M100,0 L15,85 M100,0 L50,90 M100,0 L10,50 M100,30 Q70,30 70,0 M100,60 Q40,60 40,0 M100,90 Q10,90 10,0'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. LOGIN E PAINEL DO JOGADOR — "lápide" de vidro roxo com borda de osso
   ========================================================================== */

body.theme-halloween .panel-body-login,
body.theme-halloween .panel-body-logged {
    background: linear-gradient(160deg, #2a1748 0%, #170c2b 100%);
    border: 2px solid rgba(239, 227, 196, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(59, 29, 99, 0.65),
        0 8px 20px rgba(0, 0, 0, 0.5);
}

body.theme-halloween .panel-body-login a,
body.theme-halloween .panel-body-logged a:not(.btn-user-action) {
    color: var(--hw-abobora-clara);
}

/* Os links do login têm style="color:#0d3261" no index.php: só !important vence o inline */
body.theme-halloween .panel-body-login a[style] {
    color: var(--hw-abobora-clara) !important;
}

body.theme-halloween .panel-body-login a:hover {
    color: #ffffff;
    text-shadow: 0 0 6px var(--hw-abobora-brilho);
}

body.theme-halloween .login-inputs-column .input-group {
    border-color: rgba(239, 227, 196, 0.3);
    background-color: #1a0e2e;
}

body.theme-halloween .login-inputs-column .input-group:focus-within {
    border-color: var(--hw-abobora) !important; /* a base usa !important */
    box-shadow: 0 0 10px var(--hw-abobora-brilho) !important;
}

body.theme-halloween .login-lbl,
body.theme-halloween .login-inputs-column .input-group:focus-within .login-lbl {
    background-color: #2a1748 !important; /* a base usa !important no foco */
    color: var(--hw-abobora-clara) !important;
    border-color: transparent;
}

/* A base força color:#0d3261 !important no input (normal e foco): só !important vence */
body.theme-halloween .login-input-compact,
body.theme-halloween .login-input-compact:focus,
body.theme-halloween .login-inputs-column .input-group:focus-within .login-input-compact {
    background-color: #1a0e2e !important;
    color: #ffffff !important;
    caret-color: var(--hw-abobora-clara);
}

/* Preenchimento automático do navegador: fundo claro e texto escuro próprios do Chrome/Edge */
body.theme-halloween .login-input-compact:-webkit-autofill,
body.theme-halloween .login-input-compact:-webkit-autofill:hover,
body.theme-halloween .login-input-compact:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 0 0 0 1000px #1a0e2e !important;
    caret-color: var(--hw-abobora-clara);
    transition: background-color 9999s ease-out 0s;
}

/* Olho nativo do Edge para mostrar a senha: escuro por padrão */
body.theme-halloween .login-input-compact::-ms-reveal {
    filter: invert(1) brightness(1.4);
}

body.theme-halloween .login-input-compact::placeholder {
    color: rgba(239, 227, 196, 0.5);
}

/* Botão redondo: abóbora com borda de osso (mesma forma) */
body.theme-halloween .login-btn-round {
    border-color: var(--hw-osso);
    background: radial-gradient(circle at 35% 30%, #ffc27a 0%, #ff7a1a 45%, #c24a00 100%);
    box-shadow: 0 0 0 2px var(--hw-osso-escuro), 0 0 16px var(--hw-abobora-brilho), inset 0 3px 6px rgba(255, 255, 255, 0.45);
}

body.theme-halloween .login-btn-round:hover {
    box-shadow: 0 0 0 2px var(--hw-osso-escuro), 0 0 24px rgba(255, 150, 40, 0.75), inset 0 3px 6px rgba(255, 255, 255, 0.45);
}

/* A pílula do nick é branca na base: escurecida para o nick laranja ter contraste.
   Só no painel lateral (fundo escuro); no /profile o conteúdo é claro e a base vale. */
body.theme-halloween .logged-user-card .user-name-tag {
    background: rgba(26, 14, 46, 0.85);
    border-color: rgba(255, 122, 26, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 10px rgba(255, 122, 26, 0.18);
}

body.theme-halloween .logged-user-card .user-name-tag h5 {
    color: var(--hw-abobora-clara);
    text-shadow: 0 0 8px var(--hw-abobora-brilho);
}

/* Avatar do painel lateral: fundo de luar, claro no centro, para o sprite
   destacar (o fundo escuro do tema escondia o avatar). Só no painel lateral. */
body.theme-halloween .logged-user-card .avatar-render-wrap {
    background:
        radial-gradient(ellipse 70% 75% at 50% 55%, #f3ecff 0%, #d9c9f2 38%, #8d6cc4 75%, #4b2a7a 100%);
    border: 1px solid rgba(239, 227, 196, 0.55);
    box-shadow: inset 0 0 12px rgba(30, 10, 60, 0.45), 0 0 10px rgba(255, 122, 26, 0.18);
}

body.theme-halloween .what-todo-text {
    color: var(--hw-osso);
}

/* Botões do painel logado: mantêm cor por função, em tons de Halloween */
body.theme-halloween .btn-account   { background: linear-gradient(180deg, #a6ff6b 0%, #46a51e 100%); border-color: #c6ff9b; }
body.theme-halloween .btn-missions  { background: linear-gradient(180deg, #ffe066 0%, #d99a00 100%); border-color: #fff0a8; }
body.theme-halloween .btn-attendance{ background: linear-gradient(180deg, #b48cff 0%, #6a35c2 100%); border-color: #d2bcff; }
body.theme-halloween .btn-logout    { background: linear-gradient(180deg, #ff7676 0%, #a81f26 100%); border-color: #ff9d9d; }

/* ==========================================================================
   5. BOTÕES RETRÔ (Registre-se / Guia Rápido / Ban List)
   Só o topo e a cor do título mudam. O contorno branco do título (base) é
   preservado — é ele que garante a leitura sobre o topo colorido.
   ========================================================================== */

body.theme-halloween .gb-retro-btn {
    background: linear-gradient(to bottom, #fbf3df 0%, #e6d6b0 100%);
    border-color: #8a6a3a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 122, 26, 0.15);
}

body.theme-halloween .gb-retro-btn-subtitle {
    color: #4a2a12;
}

/* Registre-se: limo de zumbi */
body.theme-halloween .gb-retro-btn.green .gb-retro-btn-top {
    background: linear-gradient(to bottom, #c8ff6b 0%, #5bc21a 55%, #2f8a12 100%);
}

body.theme-halloween .gb-retro-btn.green .gb-retro-btn-title {
    color: #2f7d0e;
}

/* Guia rápido: abóbora */
body.theme-halloween .gb-retro-btn.orange .gb-retro-btn-top {
    background: linear-gradient(to bottom, #ffd27a 0%, #ff8a1f 55%, #d65a00 100%);
}

body.theme-halloween .gb-retro-btn.orange .gb-retro-btn-title {
    color: #c24a00;
}

/* Ban List: sangue */
body.theme-halloween .gb-retro-btn.red .gb-retro-btn-top {
    background: linear-gradient(to bottom, #e3484f 0%, #a81f26 60%, #6e1016 100%);
}

body.theme-halloween .gb-retro-btn.red .gb-retro-btn-title {
    color: #8f1d1d;
}

/* Dragão do download com brilho de lua */
body.theme-halloween .dragon-image {
    filter: drop-shadow(0 0 14px rgba(255, 226, 140, 0.35)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   6. SIDEBAR DIREITA — ranking, botões de ação e Quicklink
   ========================================================================== */

/* Ranking: listras clássicas recoloridas em abóbora */
body.theme-halloween .ranking-orange-panel {
    background-color: #e86a00;
    background-image: repeating-linear-gradient(-45deg, #ff8a1f 0 15px, #f07300 15px 30px);
    border: 2px solid var(--hw-abobora-clara);
    box-shadow:
        0 0 0 3px #8a3300,
        0 8px 18px rgba(0, 0, 0, 0.55),
        0 0 18px var(--hw-abobora-brilho),
        inset 0 2px 6px rgba(255, 230, 170, 0.45);
}

body.theme-halloween .ranking-strip-item {
    background: linear-gradient(to bottom, #2a1748 0%, #1a0e2e 100%);
    border-left: 3px solid var(--hw-abobora);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}

body.theme-halloween .ranking-strip-item .ranking-nick {
    color: #ffffff;
}

body.theme-halloween .ranking-strip-item .ranking-guild-name {
    color: var(--hw-abobora-clara);
}

body.theme-halloween .ranking-plus-btn {
    background: radial-gradient(circle at 35% 30%, #ffc27a 0%, #ff7a1a 50%, #a83d00 100%);
    border-color: var(--hw-osso);
}

/* Botões azuis viram roxo-noite (mesmo brilho e sombra 3D da base) */
body.theme-halloween .gb-sidebar-action-btn {
    border-color: #b98cff;
    background: linear-gradient(180deg, #8a5bd6 0%, #4b1f8a 100%);
    box-shadow: 0 4px 0 #2a0f55, 0 5px 10px rgba(0, 0, 0, 0.45);
}

body.theme-halloween .gb-sidebar-action-btn:hover {
    background: linear-gradient(180deg, #9d70e8 0%, #5a2aa0 100%);
    box-shadow: 0 3px 0 #2a0f55, 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 14px rgba(185, 140, 255, 0.5);
}

body.theme-halloween .gb-sidebar-action-btn .btn-stars i {
    color: var(--hw-abobora-clara);
}

/* Quicklink: painel roxo (antes ficava azul-claro, fora do tema) */
body.theme-halloween .quicklink-panel {
    background: linear-gradient(180deg, #5a2d91 0%, #2e1652 100%);
    border-color: #7d4bc0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.12), 0 0 14px rgba(138, 91, 214, 0.3);
}

body.theme-halloween .quicklink-title {
    color: #ffffff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35), 0 0 12px var(--hw-abobora-brilho);
}

body.theme-halloween .quicklink-item {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(239, 227, 196, 0.15);
}

body.theme-halloween .quicklink-item:hover {
    background: rgba(255, 122, 26, 0.18);
    border-color: var(--hw-abobora);
}

body.theme-halloween .quicklink-item:hover .quicklink-icon {
    color: var(--hw-abobora-clara);
}

/* ==========================================================================
   7. HOME — TV, notícias, Power User e galeria
   ========================================================================== */

/* TV: o gradiente de 4 tons clássico, recolorido em roxo e abóbora */
body.theme-halloween .tv-frame {
    background: linear-gradient(135deg, #3b1d63 0%, #6d3fb0 50%, #5a2d91 51%, #ff8a3d 100%);
    border-color: #1a0b33;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), inset 0 0 15px rgba(255, 255, 255, 0.25), 0 0 30px rgba(255, 122, 26, 0.3);
}

body.theme-halloween .tv-screen {
    border-color: #0d0618;
    box-shadow: inset 0 0 22px rgba(255, 122, 26, 0.25);
}

body.theme-halloween .tv-antenna::before,
body.theme-halloween .tv-antenna::after {
    background: linear-gradient(#ffb15c, #5a2d91);
}

/* Widgets de notícias e Power User */
body.theme-halloween .news-widget-wrapper {
    background: var(--hw-noite-2);
    border-color: rgba(255, 122, 26, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 12px rgba(255, 122, 26, 0.15);
}

body.theme-halloween .news-header-custom {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.12) 10px, transparent 10px, transparent 20px),
        linear-gradient(180deg, #ff9a3d 0%, #c24a00 100%);
}

/* O header do PU tem cor inline no template: só !important vence o style="" */
body.theme-halloween .news-widget-wrapper .news-header-custom[style] {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px),
        linear-gradient(180deg, #8a5bd6 0%, #4b1f8a 100%) !important;
}

body.theme-halloween .news-header-icon {
    background: var(--hw-noite-2);
    color: var(--hw-abobora-clara);
}

body.theme-halloween .news-content-area {
    background: #170c2b;
    color: #d9d0ec;
}

body.theme-halloween .news-item-custom {
    border-bottom-color: rgba(255, 122, 26, 0.15);
    color: #e9e2f7;
}

body.theme-halloween .news-item-custom:hover {
    background: rgba(255, 122, 26, 0.12);
}

body.theme-halloween .news-item-custom a {
    color: #f3ecff;
}

body.theme-halloween .news-item-custom a:hover {
    color: var(--hw-abobora-clara);
}

/* Texto e data das notícias: #444/#888 na base, ilegíveis no fundo escuro */
body.theme-halloween .news-item-text {
    color: #ece4fb;
}

body.theme-halloween .news-item-date {
    color: #b9a8d6;
}

body.theme-halloween .news-footer-dots {
    background: #140a24;
}

/* Parafusos do rodapé das notícias: mesmo latão da galeria (mesmo tamanho e posição) */
body.theme-halloween .news-footer-dot {
    background: radial-gradient(circle at 35% 30%, #fff4d6 0%, #e6c98a 38%, #a9803d 72%, #5e4214 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -2px 3px rgba(40, 20, 0, 0.55),
        0 0 0 2px rgba(18, 10, 36, 0.85),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(255, 122, 26, 0.25);
}

body.theme-halloween .news-footer-dot::after {
    width: 2px;
    height: 13px;
    top: 50%;
    background: #2a1a05;
    box-shadow: 1px 0 0 rgba(255, 240, 200, 0.45);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Galeria: placa metálica vira ferro roxo com parafusos de abóbora */
body.theme-halloween .gallery-header-custom {
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px),
        linear-gradient(180deg, #8a5bd6 0%, #4b1f8a 100%);
    border-color: #4b1f8a;
    color: #ffffff;
}

body.theme-halloween .gallery-panel-metal {
    background: linear-gradient(180deg, #24143d 0%, #140a24 100%);
    border-color: rgba(255, 122, 26, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.06);
}

body.theme-halloween .gallery-panel-inner {
    background: rgba(255, 255, 255, 0.05);
}

/* Parafusos da galeria: latão envelhecido com fenda escura (mesmo tamanho e posição) */
body.theme-halloween .gallery-screw {
    background: radial-gradient(circle at 35% 30%, #fff4d6 0%, #e6c98a 38%, #a9803d 72%, #5e4214 100%);
    border: 1px solid #3a2608;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -2px 3px rgba(40, 20, 0, 0.55),
        0 0 0 2px rgba(18, 10, 36, 0.85),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(255, 122, 26, 0.25);
}

body.theme-halloween .gallery-screw::after {
    width: 11px;
    height: 2px;
    background: #2a1a05;
    box-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
}

/* ==========================================================================
   8. PÁGINAS INTERNAS — conteúdo claro, moldura de Halloween
   O título de cada página continua com o estilo da base (branco com
   contorno) sobre o cabeçalho colorido da própria página.
   ========================================================================== */

/* Moldura das páginas internas: painel roxo-noite com borda de osso, filete de
   abóbora no topo e teias nos cantos. O cartão de conteúdo (.main-card-gb)
   continua BRANCO — tabelas, formulários e textos não mudam. Mesmo padding. */
body.theme-halloween .main-container {
    position: relative;
    /* flow-root impede o margin-bottom do cartão de escapar para fora da moldura
       (colapso de margem): sem isso o cartão encosta na base do painel */
    display: flow-root;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 122, 26, 0.16) 0%, rgba(255, 122, 26, 0) 60%),
        linear-gradient(180deg, #2a1748 0%, #1d1036 100%);
    box-shadow:
        inset 0 3px 0 var(--hw-abobora),
        inset 0 0 0 1px rgba(239, 227, 196, 0.35),
        0 0 0 2px rgba(18, 10, 36, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(255, 122, 26, 0.2);
}

body.theme-halloween .main-container::before,
body.theme-halloween .main-container::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 34px;
    height: 34px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.7;
}

body.theme-halloween .main-container::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23efe3c4' stroke-width='3' stroke-opacity='0.6' d='M0,0 L100,0 M0,0 L0,100 M0,0 L85,85 M0,0 L50,90 M0,0 L90,50 M0,30 Q30,30 30,0 M0,60 Q60,60 60,0 M0,90 Q90,90 90,0'/%3E%3C/svg%3E");
}

body.theme-halloween .main-container::after {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23efe3c4' stroke-width='3' stroke-opacity='0.6' d='M100,0 L0,0 M100,0 L100,100 M100,0 L15,85 M100,0 L50,90 M100,0 L10,50 M100,30 Q70,30 70,0 M100,60 Q40,60 40,0 M100,90 Q10,90 10,0'/%3E%3C/svg%3E");
}

/* Cartão de conteúdo: branco, destacado da moldura escura. A base fica com o
   mesmo respiro das laterais (2vh), para a moldura ficar uniforme. */
body.theme-halloween .main-card-gb {
    margin-bottom: 2vh;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(239, 227, 196, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Cabeçalho de página (.ranking-header, .shop-header, .profile-header…): sem
   arredondamento embaixo, para encostar reto no breadcrumb. Topo continua com 8px. */
body.theme-halloween .main-card-gb > :has(> .gbl-header-content) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

body.theme-halloween .gbl-breadcrumb a {
    color: #c2410c; /* 4.7:1 sobre branco */
}

body.theme-halloween .ranking-number {
    background-color: #c24a00;
    box-shadow: 0 0 8px rgba(194, 74, 0, 0.55);
}

body.theme-halloween .gb-btn {
    --base1: #e86a00;
    --base2: #8a3300;
    --borda: var(--hw-osso);
    --brilho: #ff9a3d;
}

/* Modais: conteúdo claro (formulários da base), faixa de abóbora no topo */
body.theme-halloween .modal-content {
    border: 2px solid var(--hw-abobora);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px var(--hw-abobora-brilho);
}

body.theme-halloween .modal-header {
    border-bottom: 3px solid var(--hw-abobora);
}

/* ==========================================================================
   9. RODAPÉ — listras clássicas em roxo-noite
   ========================================================================== */

body.theme-halloween .gb-footer-body {
    background-color: #2a1546;
    background-image: repeating-linear-gradient(-45deg, #33195a 0 15px, #2a1546 15px 30px);
    border-top: 3px solid var(--hw-abobora);
    border-bottom-color: #1a0b33;
    box-shadow: 0 -8px 24px rgba(255, 122, 26, 0.12);
}

body.theme-halloween .gb-footer-link {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(239, 227, 196, 0.15);
}

body.theme-halloween .gb-footer-link:hover {
    background: rgba(255, 122, 26, 0.25);
    color: #fff36a;
}

/* Seletor de idioma: cápsula roxa com borda de osso e globo de abóbora.
   As <option> são nativas: o navegador só aceita cor de fundo e de texto. */
body.theme-halloween .lang-selector-wrapper {
    background: linear-gradient(180deg, #3b1d63 0%, #1d1036 100%);
    border: 1px solid rgba(239, 227, 196, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 122, 26, 0.2);
}

body.theme-halloween .lang-selector-wrapper:hover,
body.theme-halloween .lang-selector-wrapper:focus-within {
    background: linear-gradient(180deg, #4b2580 0%, #24143d 100%);
    border-color: var(--hw-abobora);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 16px var(--hw-abobora-brilho);
}

body.theme-halloween .lang-icon {
    color: var(--hw-abobora-clara);
    filter: drop-shadow(0 0 6px var(--hw-abobora-brilho));
}

body.theme-halloween .lang-form-select {
    color: #f3ecff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffb15c' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E");
}

body.theme-halloween .lang-form-select option {
    background: var(--hw-noite-2);
    color: #f3ecff;
}

body.theme-halloween .lang-form-select option:checked {
    background: #c24a00;
    color: #ffffff;
}

body.theme-halloween .gb-footer-social a:hover {
    color: var(--hw-abobora-clara);
}

/* ==========================================================================
   10. RESPONSIVO
   ========================================================================== */

@media (max-width: 991.98px) {
    /* Botão hambúrguer: abóbora com borda de osso (a base usa !important) */
    body.theme-halloween .navbar-toggler {
        border-color: var(--hw-osso) !important;
        background: linear-gradient(180deg, #ffa04a 0%, #d65a00 100%) !important;
        box-shadow: 0 0 12px var(--hw-abobora-brilho);
    }

    body.theme-halloween .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }

    body.theme-halloween #main-nav {
        background: linear-gradient(160deg, #2a1748 0%, #140a24 100%);
        border-color: rgba(239, 227, 196, 0.4);
        box-shadow: 0 0 0 3px var(--hw-roxo), 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 16px var(--hw-abobora-brilho);
    }

    body.theme-halloween #main-nav .nav-link {
        color: #f3ecff !important; /* a base mobile usa !important */
        text-shadow: none;
    }

    body.theme-halloween #main-nav .nav-link:hover,
    body.theme-halloween #main-nav .nav-link:focus {
        background: linear-gradient(to bottom, #ff8a1f 0%, #c24a00 100%) !important;
        color: #ffffff !important;
        border-color: var(--hw-abobora-clara) !important;
    }

    body.theme-halloween::before {
        top: 26px;
        right: 16px;
        width: 46px;
        height: 46px;
    }

    body.theme-halloween > header::after {
        height: 90px;
        background-size: 26px 13px, 18px 9px, 14px 7px;
        background-position: right 26px top 42px, right 70px top 22px, right 60px top 76px;
    }
}

@media (max-width: 575.98px) {
    body.theme-halloween .main-container-wrapper::before,
    body.theme-halloween .main-container-wrapper::after {
        width: 30px;
        height: 30px;
    }

    body.theme-halloween .navbar-brand::after {
        width: 30px;
        height: 27px;
    }
}

/* Quem pede menos movimento não vê morcegos voando nem abóbora balançando */
@media (prefers-reduced-motion: reduce) {
    body.theme-halloween > header::after,
    body.theme-halloween .navbar-brand::after {
        animation: none;
    }
}