/* Tema de Halloween do site (pedido do dono, 23/10/2026: "mudar tambem o site, colocar o tema de halloween; com essas
   cores pode ate tirar o video"). Vale com a classe tema-halloween no <html> (js/halloween-site.js: de 1/10 a 7/11;
   ?tema=halloween / ?tema=normal) e so troca cores e enfeites por cima do veylor.css, que continua igual. */

html.tema-halloween {
    --vg-bg: #0d0618;
    --vg-nav: #120822;
    --vg-surface: #1a0d2c;
    --vg-surface-2: #1f1034;
    --vg-sunken: #12081f;
    --vg-line: #33204d;
    --vg-line-2: #2b1a42;
    --vg-line-3: #221536;
    --vg-line-lit: #7a4a24;
    --vg-gold: #ff8a1e;
    --vg-gold-lit: #ffb35c;
    --vg-gold-soft: #ffa64a;
    --vg-gold-pale: #ffd9a0;
    --vg-gold-hover: #ffc477;
    --vg-azure: #b58cff;
    --vg-azure-lit: #d1b5ff;
    --vg-azure-soft: #c3a0ff;
    --vg-azure-pale: #e6d6ff;
    --vg-azure-hover: #dcc6ff;
    --vg-azure-surface: #1a0d2c;
    --vg-azure-surface-2: #1f1034;
    --vg-azure-line: #33204d;
    --vg-azure-line-lit: #6b4a9c;
    --vg-text: #e9def7;
    --vg-heading: #ffe6c4;
    --vg-cream: #ffd9a0;
    --vg-muted: #b3a0cf;
    --vg-warm: #a58fc4;
    --vg-dim: #8a76a8;
    --vg-dimmer: #6c5a88;
    --vg-bg-rgb: 13, 6, 24;
    --vg-gold-rgb: 255, 138, 30;
    --vg-gold-lit-rgb: 255, 179, 92;
    --vg-azure-rgb: 181, 140, 255;
    --vg-azure-lit-rgb: 209, 181, 255;
    --vg-text-rgb: 233, 222, 247;
    --vg-dim-rgb: 138, 118, 168;
    --vg-forge: linear-gradient(180deg, #fff0d0 10%, #ffc46e 40%, #ff8a1e 70%, #c4560c 95%);
    --bs-body-bg: var(--vg-bg);
    --bs-secondary-bg: var(--vg-surface);
    --bs-tertiary-bg: var(--vg-surface-2);
    --bs-border-color: var(--vg-line);
}

html.tema-halloween body { background: var(--vg-bg); }
html.tema-halloween ::selection { background: #d4600a; color: #fff; }

/* fundo: brasas e morcegos por cima da pagina inteira (canvas fixo do halloween-site.js) e um brilho roxo no topo */
html.tema-halloween body::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(120, 60, 200, 0.22), transparent 70%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}
.hw-site-enfeite { inset: 0; pointer-events: none; position: fixed; z-index: 1; }
html.tema-halloween main, html.tema-halloween footer { position: relative; z-index: 2; }

/* navbar */
html.tema-halloween .vg-nav {
    background: rgba(18, 8, 34, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 138, 30, 0.35);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
html.tema-halloween .vg-nav__link:hover,
html.tema-halloween .vg-nav__link.is-active { color: var(--vg-gold-lit); }

/* hero: o ceu animado no lugar do video (que nem e baixado) */
html.tema-halloween .vg-hero__video { display: none; }
html.tema-halloween .vg-hero { min-height: clamp(520px, 88vh, 760px); overflow: hidden; }
html.tema-halloween .vg-hero__veil {
    background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(13, 6, 24, 0) 0%, rgba(13, 6, 24, 0.2) 70%, rgba(13, 6, 24, 0.75) 100%);
}
html.tema-halloween .vg-hero__body { justify-content: center; }
html.tema-halloween .vg-hero__logo {
    animation: hw-flutua 6s ease-in-out infinite;
    filter: drop-shadow(0 0 26px rgba(160, 100, 255, 0.55)) drop-shadow(0 8px 14px #000);
}
@keyframes hw-flutua { 50% { transform: translateY(-10px); } }
html.tema-halloween .vg-display,
html.tema-halloween .vg-hero__tagline {
    color: #ff8a1e;
    filter: drop-shadow(0 3px 0 rgba(40, 12, 0, 0.9)) drop-shadow(0 0 24px rgba(255, 138, 30, 0.45));
}
.hw-site-faixa {
    background: linear-gradient(90deg, rgba(255, 138, 30, 0), rgba(255, 138, 30, 0.16), rgba(255, 138, 30, 0));
    border-bottom: 1px solid rgba(255, 138, 30, 0.25);
    border-top: 1px solid rgba(255, 138, 30, 0.25);
    color: var(--vg-gold-pale);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 4px;
    margin: -0.5rem auto 1.5rem;
    padding: 0.45rem 1.5rem;
    text-transform: uppercase;
}

/* botoes */
html.tema-halloween .vg-btn--jogar {
    background: linear-gradient(180deg, #ffc46e 0%, #ff8a1e 55%, #d4600a 100%);
    border: 1px solid #ffd9a0;
    color: #2a1000;
}
html.tema-halloween .vg-btn--jogar:hover,
html.tema-halloween .vg-btn--jogar:focus { background: linear-gradient(180deg, #ffd08a, #ff9a33 55%, #e06c10); color: #2a1000; }
html.tema-halloween .vg-btn--jogar { --vg-blood-rgb: 255, 138, 30; }
html.tema-halloween .vg-btn--gold { background: linear-gradient(180deg, #d1b5ff, #8a5ad8); border-color: #e6d6ff; color: #1a0a2e; box-shadow: 0 0 18px rgba(181, 140, 255, 0.35); }
html.tema-halloween .vg-btn--gold:hover,
html.tema-halloween .vg-btn--gold:focus { background: linear-gradient(180deg, #e2cfff, #9c6ce6); color: #1a0a2e; }
html.tema-halloween .vg-btn--ghost { border-color: rgba(181, 140, 255, 0.45); color: var(--vg-azure-pale); }
html.tema-halloween .vg-btn--ghost-fill { background: rgba(26, 13, 44, 0.75); }

/* paineis e cartoes: roxo com teia nos cantos */
html.tema-halloween .vg-panel {
    background: linear-gradient(180deg, rgba(44, 22, 72, 0.9), rgba(22, 11, 38, 0.94));
    border-color: rgba(255, 138, 30, 0.28);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(120, 60, 200, 0.12);
    position: relative;
}
html.tema-halloween .vg-panel::after {
    background:
        repeating-conic-gradient(from 90deg at 100% 0, rgba(232, 220, 255, 0.4) 0 1deg, transparent 1deg 15deg),
        repeating-radial-gradient(circle at 100% 0, transparent 0 9px, rgba(232, 220, 255, 0.35) 9px 10px);
    content: '';
    height: 52px;
    -webkit-mask: radial-gradient(circle at 100% 0, #000 0 50px, transparent 51px);
    mask: radial-gradient(circle at 100% 0, #000 0 50px, transparent 51px);
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
}
html.tema-halloween .vg-panel__head { border-bottom-color: rgba(255, 138, 30, 0.22); }
html.tema-halloween .vg-panel__head i { color: var(--vg-gold); }
html.tema-halloween .vg-tab.is-active { border-color: var(--vg-gold); color: var(--vg-gold-lit); }
html.tema-halloween .vg-page-head { filter: hue-rotate(250deg) saturate(0.9); }
html.tema-halloween .vg-page-head > * { filter: hue-rotate(-250deg); }
html.tema-halloween footer { background: #0a0414; border-top: 1px solid rgba(255, 138, 30, 0.2); }

@media (prefers-reduced-motion: reduce) {
    html.tema-halloween .vg-hero__logo { animation: none; }
}