/* Tema do site (App\Support\SiteTheme): cantos, fundo, brilho, efeitos de época e o aviso da prévia.
   As cores vêm das variáveis do tema (--bg, --card, --acc...) num <style> do layout. */

/* o site é sempre escuro: barras de rolagem, caixas de seleção e campos do navegador no escuro também (sem barra branca) */
:root { color-scheme: dark; }
* { scrollbar-color: color-mix(in srgb, var(--slate) 30%, transparent) transparent; }

/* ---- cantos ---- */
html[data-cantos=medio] :is(.card, .fx-hero, .fx-buy, .mk-card, .mkv-card, .mc, .mcx-list, .mcx-empty, .modal, .acct-menu, .mng-box, .mka-how, .dh-card) { border-radius: 10px; }
html[data-cantos=medio] :is(.btn, .alert, .field input, .field select, .field textarea, .mc-btn, .mc-b, .chat-btn, .acct-btn, .top-donate, .mkv-role, .fx-st, .side-nav a) { border-radius: 7px; }
html[data-cantos=reto] :is(.card, .fx-hero, .fx-buy, .mk-card, .mkv-card, .mc, .mcx-list, .mcx-empty, .modal, .acct-menu, .mng-box, .mka-how, .dh-card) { border-radius: 3px; }
html[data-cantos=reto] :is(.btn, .alert, .field input, .field select, .field textarea, .mc-btn, .mc-b, .chat-btn, .acct-btn, .top-donate, .mkv-role, .fx-st, .side-nav a, .pill) { border-radius: 2px; }

/* ---- fundo ---- */
html[data-fundo=liso] body::before { display: none; }
html[data-fundo=estrelas] body::before {
    background-image:
        radial-gradient(1px 1px at 22px 34px, color-mix(in srgb, var(--text) 80%, transparent) 50%, transparent 52%),
        radial-gradient(1px 1px at 140px 90px, color-mix(in srgb, var(--text) 60%, transparent) 50%, transparent 52%),
        radial-gradient(1.6px 1.6px at 210px 170px, color-mix(in srgb, var(--acc2) 85%, transparent) 50%, transparent 52%),
        radial-gradient(1px 1px at 80px 220px, color-mix(in srgb, var(--text) 55%, transparent) 50%, transparent 52%),
        radial-gradient(1.4px 1.4px at 250px 40px, color-mix(in srgb, var(--acc) 85%, transparent) 50%, transparent 52%);
    background-size: 280px 260px; mask-image: none; -webkit-mask-image: none; opacity: .6; animation: tema-pisca 7s ease-in-out infinite alternate;
}
html[data-fundo=nevoa] body::before {
    background-image:
        radial-gradient(45% 38% at 12% 8%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%),
        radial-gradient(38% 32% at 88% 22%, color-mix(in srgb, var(--acc2) 13%, transparent), transparent 70%),
        radial-gradient(55% 40% at 50% 105%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%);
    background-size: auto; mask-image: none; -webkit-mask-image: none; animation: tema-nevoa 20s ease-in-out infinite alternate;
}
html[data-fundo=arte] body::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 55%, var(--bg) 92%),
        var(--fundo-img, none) center top / cover no-repeat;
    mask-image: none; -webkit-mask-image: none; filter: blur(2px) saturate(.9); transform: scale(1.03);
}
/* Textura do tema (SiteTheme::texture): o ladrilho desenhado com as cores do tema + o brilho; e um toque vivo por tema */
html[data-fundo=textura] body::before {
    background: var(--tex-bg, none); mask-image: none; -webkit-mask-image: none;
}
html[data-fundo=textura] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
/* Tempestade: um relâmpago de vez em quando */
html[data-fundo=textura][data-tema=tempestade] body::after {
    background: radial-gradient(70% 45% at 72% -5%, color-mix(in srgb, var(--acc2) 34%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), transparent 40%);
    animation: tex-raio 13s linear infinite;
}
@keyframes tex-raio { 0%, 90%, 100% { opacity: 0; } 91% { opacity: .9; } 92% { opacity: .15; } 93.5% { opacity: .7; } 96% { opacity: 0; } }
/* Necromante: a névoa verde respira */
html[data-fundo=textura][data-tema=necromante] body::after {
    background: radial-gradient(60% 30% at 20% 104%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%), radial-gradient(55% 28% at 85% 106%, color-mix(in srgb, var(--acc2) 10%, transparent), transparent 70%);
    animation: tex-respira 9s ease-in-out infinite alternate;
}
/* Abismo: a nebulosa pulsa devagar */
html[data-fundo=textura][data-tema=abismo] body::after {
    background: radial-gradient(35% 30% at 60% 45%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 70%);
    animation: tex-respira 12s ease-in-out infinite alternate;
}
/* Celestial e Abismo: as estrelas piscam */
html[data-fundo=textura]:is([data-tema=celestial], [data-tema=abismo]) body::before { animation: tema-pisca 7s ease-in-out infinite alternate; }
/* Forja: a brasa de baixo esquenta e esfria */
html[data-fundo=textura][data-tema=forja] body::after {
    background: radial-gradient(60% 30% at 50% 108%, color-mix(in srgb, var(--hl) 18%, transparent), transparent 70%);
    animation: tex-respira 4.5s ease-in-out infinite alternate;
}
/* Taverna: a luz de vela tremula */
html[data-fundo=textura][data-tema=taverna] body::after {
    background: radial-gradient(40% 35% at 12% 6%, color-mix(in srgb, var(--hl) 12%, transparent), transparent 70%);
    animation: tex-vela 3.2s ease-in-out infinite alternate;
}
/* fontes largas dos temas (Uncial, Cinzel Decorative...): o nome da classe no cartão do mercado corta com "…" em vez de empurrar o nível */
.mk-top > :not(.mk-emb, .mk-lv) { min-width: 0; flex: 1; }
.mk-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem !important; }
.mk-lv { flex: none; }
@keyframes tex-respira { from { opacity: .35; } to { opacity: 1; } }
@keyframes tex-vela { 0% { opacity: .5; } 30% { opacity: .9; } 55% { opacity: .65; } 80% { opacity: 1; } 100% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { html[data-fundo=textura] body::before, html[data-fundo=textura] body::after { animation: none; } html[data-fundo=textura] body::after { opacity: .6; } }
@keyframes tema-pisca { from { opacity: .45; } to { opacity: .75; } }
@keyframes tema-nevoa { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -2%, 0) scale(1.06); } }

/* ---- brilho ---- */
html[data-brilho=suave] .btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
html[data-brilho=suave] .card { box-shadow: none; }
html[data-brilho=suave] .grad-text { filter: saturate(.85); }
html[data-brilho=forte] .btn:not(.ghost) { box-shadow: 0 14px 34px -10px var(--acc), 0 0 26px -6px color-mix(in srgb, var(--acc2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
html[data-brilho=forte] .card { box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .9), 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent), 0 0 46px -24px var(--acc); }
html[data-brilho=forte] :is(h1, .hero h1) { text-shadow: 0 0 28px color-mix(in srgb, var(--acc) 45%, transparent); }

/* ---- molduras (gerado por gm_tools/temas3/gerar_molduras.py): janela de jogo ----
   rpg = Cantoneiras, oriental, runica, metal, arcana. Todas: cantos retos, borda na cor de destaque com filete por dentro e
   botões em relevo; cada uma põe o seu enfeite no ::after dos cartões grandes (não pega clique). */
html[data-moldura]:not([data-moldura=simples]) :is(.card, .fx-hero, .fx-buy, .mk-card, .mkv-card, .mc, .mcx-list, .mcx-empty, .modal, .acct-menu, .mng-box, .mka-how, .dh-card, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st, .od-item, .wallet, .bag, .char, .bell-menu, .fx-menu, .pw-lang-menu) { border-radius: 3px; }
html[data-moldura]:not([data-moldura=simples]) :is(.btn, .alert, .field input, .field select, .field textarea, .mc-btn, .mc-b, .chat-btn, .acct-btn, .top-donate, .mkv-role, .fx-st, .side-nav a, .pill, .chip, .ac-row, .av-it, .mkm-row, .mp-row, .pd-day, .news-tag, .fx-pill, .mkv-chip, .mng-chip, .dh-chip, .ct-q, .dn-q, .mkv-mode, .mkv-money, .ind-st, .fx-pet, .fx-sk, .fx-search, .mka-role, .pt-ic, .pt-tag, .pt-eyebrow, .pt-step span, .bell-btn, .top-burger, .acct-av, .brand .logo, .pt-tabs button, .mk-pages button, .ct-av, .ct-money, .ct-go a, .ct-tag, .ct-h .ic, .lc-row, .wl-ic, .od-ic) { border-radius: 2px; }
html[data-moldura]:not([data-moldura=simples]) :is(.chip, .ac-row, .av-it, .mkm-row, .mp-row, .pd-day, .mkv-chip, .mng-chip, .dh-chip, .ct-q, .dn-q, .mkv-mode, .ind-st, .fx-pill, .pt-ic, .pt-tag, .ct-tag, .lc-row, .od-item) { border-color: color-mix(in srgb, var(--hl) 26%, var(--line2)); }
html[data-moldura]:not([data-moldura=simples]) :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st) {
    position: relative; border-color: color-mix(in srgb, var(--hl) 38%, var(--line2));
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--card2) 90%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--hl) 16%, transparent), 0 26px 60px -34px rgba(0, 0, 0, .95);
}
html[data-moldura]:not([data-moldura=simples]) :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after { content: ""; position: absolute; inset: 0; pointer-events: none; --k: color-mix(in srgb, var(--hl) 85%, transparent); }
html[data-moldura]:not([data-moldura=simples]) .btn:not(.ghost, .fx-cta) {
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--hl) 50%, #000);
    background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 78%, #fff), var(--acc) 48%, color-mix(in srgb, var(--acc) 68%, #000));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 color-mix(in srgb, var(--acc) 38%, #000), 0 8px 16px -8px #000;
}
html[data-moldura]:not([data-moldura=simples]) .btn:not(.ghost, .fx-cta):active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 color-mix(in srgb, var(--acc) 38%, #000); }
html[data-moldura]:not([data-moldura=simples]) .btn.ghost { color: var(--hl) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 42%, var(--line2)); }
html[data-moldura]:not([data-moldura=simples]) .top .nav a.on::after { background: var(--hl); border-radius: 0; box-shadow: 0 0 8px color-mix(in srgb, var(--hl) 60%, transparent); }
html[data-moldura]:not([data-moldura=simples]) .card :is(h1, h2) { color: var(--gold); }

/* Cantoneiras: um "L" em cada canto */
html[data-moldura=rpg] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after {
    background:
        linear-gradient(var(--k), var(--k)) left top / 16px 2px no-repeat, linear-gradient(var(--k), var(--k)) left top / 2px 16px no-repeat,
        linear-gradient(var(--k), var(--k)) right top / 16px 2px no-repeat, linear-gradient(var(--k), var(--k)) right top / 2px 16px no-repeat,
        linear-gradient(var(--k), var(--k)) left bottom / 16px 2px no-repeat, linear-gradient(var(--k), var(--k)) left bottom / 2px 16px no-repeat,
        linear-gradient(var(--k), var(--k)) right bottom / 16px 2px no-repeat, linear-gradient(var(--k), var(--k)) right bottom / 2px 16px no-repeat;
}

/* Oriental: arabescos de nuvem nos cantos, como as janelas do jogo */
html[data-moldura=oriental] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after {
    inset: 0; background: var(--k); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hl) 45%, transparent));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E") left top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate%2832 0%29 scale%28-1 1%29'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate%280 32%29 scale%281 -1%29'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") left bottom / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate%2832 32%29 scale%28-1 -1%29'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right bottom / 30px 30px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E") left top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate%2832 0%29 scale%28-1 1%29'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate%280 32%29 scale%281 -1%29'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") left bottom / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='translate%2832 32%29 scale%28-1 -1%29'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 31V12C1 5.9 5.9 1 12 1h19v2.6H12A8.4 8.4 0 0 0 3.6 12v19zM12.5 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 1 0 0-9zm0 2.1a2.4 2.4 0 1 1 0 4.8a2.4 2.4 0 1 1 0-4.8zM19 6h8v2h-8zM6 19v8h2v-8z'/%3E%3Ccircle cx='12.5' cy='12' r='1' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right bottom / 30px 30px no-repeat;
}
html[data-moldura=oriental] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st) { border-color: color-mix(in srgb, var(--hl) 30%, var(--line2)); }

/* Rúnica: nós nos cantos e um losango no meio de cada lado */
html[data-moldura=runica] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after {
    inset: 0; background: var(--k);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/svg%3E") left top / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate%2828 0%29 scale%28-1 1%29'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right top / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate%280 28%29 scale%281 -1%29'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") left bottom / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate%2828 28%29 scale%28-1 -1%29'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right bottom / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath fill='%23000' d='M30 1l6 6-6 6-6-6z'/%3E%3Cpath fill='%23000' d='M2 6h18v2H2zM40 6h18v2H40z'/%3E%3Ccircle cx='22' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='38' cy='7' r='1.4' fill='%23000'/%3E%3C/svg%3E") center top / 56px 13px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath fill='%23000' d='M30 1l6 6-6 6-6-6z'/%3E%3Cpath fill='%23000' d='M2 6h18v2H2zM40 6h18v2H40z'/%3E%3Ccircle cx='22' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='38' cy='7' r='1.4' fill='%23000'/%3E%3C/svg%3E") center bottom / 56px 13px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 60'%3E%3Cpath fill='%23000' d='M1 30l6-6 6 6-6 6z'/%3E%3Cpath fill='%23000' d='M6 2v18h2V2zM6 40v18h2V40z'/%3E%3Ccircle cx='7' cy='22' r='1.4' fill='%23000'/%3E%3Ccircle cx='7' cy='38' r='1.4' fill='%23000'/%3E%3C/svg%3E") left center / 13px 56px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 60'%3E%3Cpath fill='%23000' d='M1 30l6-6 6 6-6 6z'/%3E%3Cpath fill='%23000' d='M6 2v18h2V2zM6 40v18h2V40z'/%3E%3Ccircle cx='7' cy='22' r='1.4' fill='%23000'/%3E%3Ccircle cx='7' cy='38' r='1.4' fill='%23000'/%3E%3C/svg%3E") right center / 13px 56px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/svg%3E") left top / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate%2828 0%29 scale%28-1 1%29'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right top / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate%280 28%29 scale%281 -1%29'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") left bottom / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='translate%2828 28%29 scale%28-1 -1%29'%3E%3Cpath fill='%23000' d='M1 1h14v3H4v11H1z'/%3E%3Cpath fill='%23000' d='M9 5l4 4-4 4-4-4z'/%3E%3Ccircle cx='18' cy='2.5' r='1.3' fill='%23000'/%3E%3Ccircle cx='2.5' cy='18' r='1.3' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") right bottom / 24px 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath fill='%23000' d='M30 1l6 6-6 6-6-6z'/%3E%3Cpath fill='%23000' d='M2 6h18v2H2zM40 6h18v2H40z'/%3E%3Ccircle cx='22' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='38' cy='7' r='1.4' fill='%23000'/%3E%3C/svg%3E") center top / 56px 13px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath fill='%23000' d='M30 1l6 6-6 6-6-6z'/%3E%3Cpath fill='%23000' d='M2 6h18v2H2zM40 6h18v2H40z'/%3E%3Ccircle cx='22' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='38' cy='7' r='1.4' fill='%23000'/%3E%3C/svg%3E") center bottom / 56px 13px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 60'%3E%3Cpath fill='%23000' d='M1 30l6-6 6 6-6 6z'/%3E%3Cpath fill='%23000' d='M6 2v18h2V2zM6 40v18h2V40z'/%3E%3Ccircle cx='7' cy='22' r='1.4' fill='%23000'/%3E%3Ccircle cx='7' cy='38' r='1.4' fill='%23000'/%3E%3C/svg%3E") left center / 13px 56px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 60'%3E%3Cpath fill='%23000' d='M1 30l6-6 6 6-6 6z'/%3E%3Cpath fill='%23000' d='M6 2v18h2V2zM6 40v18h2V40z'/%3E%3Ccircle cx='7' cy='22' r='1.4' fill='%23000'/%3E%3Ccircle cx='7' cy='38' r='1.4' fill='%23000'/%3E%3C/svg%3E") right center / 13px 56px no-repeat;
}

/* Metal: placa com rebites nos cantos e borda mais grossa */
html[data-moldura=metal] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st) {
    border-width: 2px; border-color: color-mix(in srgb, var(--hl2) 45%, var(--line2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 5px color-mix(in srgb, var(--card2) 92%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--hl) 12%, transparent), 0 26px 60px -34px rgba(0, 0, 0, .95);
}
html[data-moldura=metal] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after {
    inset: 0; --r: radial-gradient(circle at 40% 38%, rgba(255, 255, 255, .75) 0 .8px, color-mix(in srgb, var(--hl) 75%, #fff) 1.2px, color-mix(in srgb, var(--hl2) 80%, #000) 3px, rgba(0, 0, 0, .55) 4px, transparent 4.6px);
    background: var(--r) 7px 7px / 10px 10px no-repeat, var(--r) calc(100% - 7px) 7px / 10px 10px no-repeat,
        var(--r) 7px calc(100% - 7px) / 10px 10px no-repeat, var(--r) calc(100% - 7px) calc(100% - 7px) / 10px 10px no-repeat;
}
html[data-moldura=metal] .btn:not(.ghost, .fx-cta) { border-width: 2px; }

/* Arcana: borda de energia que gira devagar em volta do cartão */
@property --pw-arc { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-moldura=arcana] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st) { border-color: color-mix(in srgb, var(--acc2) 22%, var(--line2)); }
html[data-moldura=arcana] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after {
    inset: 0; padding: 1px; border-radius: inherit;
    background: conic-gradient(from var(--pw-arc), transparent 0 62%, color-mix(in srgb, var(--acc2) 90%, transparent) 76%, var(--hl) 82%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acc2) 70%, transparent)); animation: pw-arc 7s linear infinite;
}
html[data-moldura=arcana] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st):nth-child(2n)::after { animation-duration: 9s; animation-direction: reverse; }
html[data-moldura=arcana] .btn:not(.ghost, .fx-cta) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 color-mix(in srgb, var(--acc) 38%, #000), 0 0 22px -6px var(--acc2); }
@keyframes pw-arc { to { --pw-arc: 360deg; } }
@media (prefers-reduced-motion: reduce) { html[data-moldura=arcana] :is(.card, .mk-card, .mkv-card, .dh-card, .mka-how, .mng-box, .pt-feat, .pt-strip, .news-card, .prod, .pt-board, .pt-dl, .pt-guild, .pt-pod, .mk-step, .dn-tier, .dn-wallet, .dn-step, .bt-tile, .mp-card, .mp-wallet, .pd-hero, .ind-hero, .dh-main, .fx-tile, .mkv-mine, .ct-hero, .wl-list, .wl-st)::after { animation: none; } }

/* ---- efeitos da época (SiteTheme::fxHtml + public/painel/js/epocas.js) ----
   html[data-efeitos] = a escolha do jogador (on / leve / off), guardada no navegador dele */
.pw-fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.pw-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-fx i, .pw-fx b { position: absolute; display: block; font-style: normal; font-weight: 400; }
html[data-efeitos=off] .pw-fx { display: none; }

/* varal embaixo do topo: luzinhas de Natal e bandeirinhas da Festa Junina */
.fx-varal { position: fixed; left: 0; right: 0; top: 65px; height: 48px; }
body.lat .fx-varal { top: 61px; }
.fx-varal svg { position: absolute; left: 0; top: 0; width: 100%; height: 40px; overflow: visible; }
.fx-varal path { fill: none; stroke: color-mix(in srgb, var(--text) 28%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fx-varal i { transform: translateX(-50%); }
.fx-luzes i { width: 9px; height: 13px; margin-top: 1px; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 40% 32%, #fff 0 12%, var(--c) 46%);
    box-shadow: 0 0 8px 1px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent);
    animation: fx-pisca 1.8s ease-in-out var(--d) infinite alternate; }
.fx-luzes i::before { content: ""; position: absolute; left: 50%; top: -4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 1px; background: #2b3038; }
@keyframes fx-pisca { 0%, 30% { opacity: .3; } 100% { opacity: 1; } }
.fx-bandeiras i { width: 15px; height: 20px; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
    background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 78%, #000));
    animation: fx-bandeira 2.4s ease-in-out var(--d) infinite alternate; }
@keyframes fx-bandeira { from { transform: translateX(-50%) rotate(-8deg); } to { transform: translateX(-50%) rotate(8deg); } }
/* Aniversário: flâmulas (triângulos) de festa */
.fx-flamulas i { width: 16px; height: 22px; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), color-mix(in srgb, var(--c) 75%, #000));
    animation: fx-bandeira 2.8s ease-in-out var(--d) infinite alternate; }
html[data-efeitos=leve] .fx-varal i { animation-duration: 4s; }

/* Halloween: teias nos dois cantos de cima, balançando de leve, com gotinhas de orvalho que brilham */
.fx-teia { position: absolute; left: 0; top: 65px; width: 200px; height: 200px; overflow: visible; transform-origin: 0 0; animation: fx-teia 9s ease-in-out infinite alternate; }
.fx-teia.d { left: auto; right: 0; transform-origin: 100% 0; animation-delay: -4.5s; }
body.lat .fx-teia { top: 61px; }
.fx-teia path { fill: none; stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width: .9; stroke-linecap: round; }
.fx-teia circle { fill: color-mix(in srgb, var(--text) 85%, transparent); animation: fx-gota 3.4s ease-in-out infinite alternate; }
.fx-teia circle:nth-of-type(2n) { animation-delay: -1.7s; }
@keyframes fx-teia { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }
@keyframes fx-gota { from { opacity: .2; } to { opacity: 1; } }

/* Halloween: névoa rasteira e abóboras acesas nos cantos */
.fx-nevoa { position: absolute; left: -10%; right: -10%; bottom: -6vh; height: 36vh; }
.fx-nevoa i { position: absolute; inset: 0; filter: blur(18px); animation: fx-nevoa 26s ease-in-out infinite alternate;
    background: radial-gradient(40% 60% at 20% 72%, color-mix(in srgb, var(--text) 10%, transparent), transparent 70%),
        radial-gradient(35% 55% at 72% 82%, color-mix(in srgb, var(--acc2) 12%, transparent), transparent 70%); }
.fx-nevoa i:nth-child(2) { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .8; }
.fx-nevoa i:nth-child(3) { animation-duration: 42s; bottom: 6vh; opacity: .55; }
@keyframes fx-nevoa { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, -3%, 0); } }
.fx-abobora { bottom: 12px; font-size: 34px; animation: fx-vela 2.8s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes fx-vela { from { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 40%, transparent)); } to { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--acc) 90%, transparent)); } }

/* Ano Novo Chinês: lanternas penduradas embaixo do topo, balançando */
.fx-penduradas i { top: 62px; font-size: 30px; transform-origin: 50% -14px; animation: fx-balanca var(--d) ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--acc) 55%, transparent)); }
.fx-penduradas i::before { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 16px; background: color-mix(in srgb, var(--hl) 50%, transparent); }
@keyframes fx-balanca { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

@media (max-width: 700px) {
    .fx-varal i.m { display: none; }
    .fx-penduradas i { font-size: 20px; }
    .fx-penduradas i:nth-child(2), .fx-penduradas i:nth-child(3) { display: none; }
    .fx-abobora { font-size: 24px; }
    .fx-teia { width: 120px; height: 120px; }
}

/* botão do jogador (canto de baixo) e o menu Ligados / Leves / Desligados */
.fx-ctl { position: fixed; left: 16px; bottom: 16px; z-index: 60; font: 500 .85rem Inter, system-ui, sans-serif; }
.fx-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text);
    background: color-mix(in srgb, var(--panel) 72%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--line2));
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); transition: transform .15s, box-shadow .2s, opacity .2s, filter .2s; animation: fx-chama 2.4s ease-out 1.5s 2; }
.fx-btn:hover, .fx-btn[aria-expanded=true] { transform: translateY(-2px) scale(1.06); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .85), 0 0 22px -4px var(--acc); }
.fx-btn:focus-visible { outline: 2px solid var(--acc2); outline-offset: 3px; }
html[data-efeitos=off] .fx-btn { opacity: .55; filter: grayscale(.85); animation: none; }
html[data-efeitos=off] .fx-btn:hover { opacity: 1; filter: none; }
@keyframes fx-chama { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.fx-menu { position: absolute; left: 0; bottom: 56px; width: 272px; padding: 12px; border-radius: 16px; color: var(--text);
    background: color-mix(in srgb, var(--panel) 86%, transparent); border: 1px solid var(--line2);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px color-mix(in srgb, var(--acc) 10%, transparent); transform-origin: 22px 100%; animation: fx-abre .18s ease-out; }
.fx-menu[hidden] { display: none; }
.fx-menu b { display: block; margin: 0 2px 10px; font-weight: 700; }
.fx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); }
.fx-seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 0; border-radius: 9px; background: none; color: var(--dim);
    font: 600 .74rem Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.fx-seg button span { font-size: 17px; line-height: 1; }
.fx-seg button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.fx-seg button:active { transform: scale(.96); }
.fx-seg button[aria-pressed=true] { color:var(--onacc,#fff); background: var(--grad); box-shadow: 0 6px 16px -8px var(--acc); }
.fx-menu .fx-dica { margin: 10px 2px 0; padding: 8px 10px; border-radius: 10px; color: var(--dim); font-size: .78rem; line-height: 1.4;
    background: color-mix(in srgb, var(--acc) 9%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 18%, transparent); }
.fx-menu small { display: block; margin: 10px 2px 0; color: var(--mute); font-size: .74rem; }
.fx-menu small.ok { color: var(--ok); }
@keyframes fx-abre { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* faixa da época embaixo do topo (texto e link do admin); o jogador fecha */
.fx-faixa { position: relative; overflow: hidden; max-height: 140px; transition: opacity .3s, max-height .3s;
    border-bottom: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 22%, var(--bg)), color-mix(in srgb, var(--acc2) 16%, var(--bg)) 55%, color-mix(in srgb, var(--acc) 22%, var(--bg))); }
.fx-faixa::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%); animation: fx-reflexo 6s ease-in-out 1s infinite;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); }
@keyframes fx-reflexo { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.fx-faixa-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 9px 48px 9px 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
    text-align: center; font-size: .9rem; font-weight: 600; color: var(--text); }
.fx-faixa-ic { font-size: 1.15rem; flex: none; }
.fx-faixa a { margin-left: 6px; color: var(--hl); font-weight: 700; white-space: nowrap; text-decoration: none; }
.fx-faixa a:hover { text-decoration: underline; }
.fx-faixa-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
    background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 18px; line-height: 1; }
.fx-faixa-x:hover { background: color-mix(in srgb, var(--text) 16%, transparent); }
.fx-faixa.saindo { opacity: 0; max-height: 0; }
/* com o varal (luzinhas, bandeirinhas) pendurado embaixo do topo: o texto da faixa fica abaixo dele */
body:has(.fx-varal) .fx-faixa-in { padding-top: 38px; }
body:has(.fx-varal) .fx-faixa-x { top: calc(50% + 14px); }
html[data-efeitos=off] body:has(.fx-varal) .fx-faixa-in { padding-top: 9px; }
html[data-efeitos=off] body:has(.fx-varal) .fx-faixa-x { top: 50%; }

/* quem pediu menos movimento no sistema: sem efeitos (a não ser que ligue no botão) e sem fundo animado */
@media (prefers-reduced-motion: reduce) {
    html:not([data-efeitos=on]) .pw-fx { display: none; }
    .fx-faixa::after, .fx-btn, .fx-varal i, .fx-abobora, .fx-teia, .fx-teia circle { animation: none; }
    html body::before { animation: none !important; }
}

/* ---- prévia (só a equipe) ---- */
.tema-previa { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 999px;
    background: #111; color: #fff; font: 600 .85rem Inter, system-ui, sans-serif; border: 1px solid var(--acc); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); white-space: nowrap; }
.tema-previa a { color: var(--acc2); text-decoration: underline; }