/* ============================================================================
   loja-cosmeticos.css — visuais vendidos na Loja                     [2026-10-01]
   ----------------------------------------------------------------------------
   Usado no perfil (@usuario), na Loja (prévias), no Inventário e no painel.
   Cada visual é ligado por atributo (o PHP decide quem tem o quê — este arquivo
   só pinta):
     [data-tvl-moldura="alien|rosa"]                 → em volta da foto
     [data-tvl-fundo="nebulosa|meteoros|imagem"]     → fundo do cabeçalho do perfil
     [data-tvl-tema="matrix|alienigena"]             → cores do bloco (+ efeito do loja-efeitos.js)
   Novo visual = entrada em tv_loja_visuais() (functions.php) + regra aqui.
   Respeita prefers-reduced-motion. Nada de cor fixa no texto do site: só nos visuais.
   ============================================================================ */

/* ---------- foto com moldura ------------------------------------------------ */
.tvl-avatar { position: relative; display: inline-block; width: var(--tvl-av, 120px); height: var(--tvl-av, 120px); flex: 0 0 auto; }
.tvl-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; position: relative; z-index: 1; }
[data-tvl-moldura] { position: relative; isolation: isolate; }
[data-tvl-moldura]::before, [data-tvl-moldura]::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; }

/* Alien: anel de energia verde girando + luzes do disco */
[data-tvl-moldura="alien"]::before {
	inset: -7px; z-index: 0;
	background: conic-gradient(from 0deg, #35c43f, #48d0ff 25%, #8ff08a 45%, #35c43f 55%, #6f5cc2 75%, #35c43f);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(53, 196, 63, .75));
	animation: tvl-gira 3.2s linear infinite;
}
[data-tvl-moldura="alien"]::after {
	inset: -13px; z-index: 2;
	background:
		radial-gradient(circle at 50% 0%, #ffd84a 0 3px, transparent 4px),
		radial-gradient(circle at 100% 50%, #48d0ff 0 3px, transparent 4px),
		radial-gradient(circle at 50% 100%, #8ff08a 0 3px, transparent 4px),
		radial-gradient(circle at 0% 50%, #48d0ff 0 3px, transparent 4px);
	animation: tvl-gira 6s linear infinite reverse, tvl-pisca 1.4s steps(2, jump-none) infinite;
}

/* Rosa: aro rosa suave com estrelinhas */
[data-tvl-moldura="rosa"]::before {
	inset: -6px; z-index: 0;
	background: conic-gradient(from 210deg, #ff7eb6, #ffc2df, #ff4f9a, #ffd1e8, #ff7eb6);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	filter: drop-shadow(0 0 10px rgba(255, 79, 154, .55));
	animation: tvl-pulsa 2.4s ease-in-out infinite;
}
[data-tvl-moldura="rosa"]::after {
	inset: -14px; z-index: 2;
	background:
		radial-gradient(circle at 18% 14%, #fff 0 1.5px, #ff9fcb 2px, transparent 4px),
		radial-gradient(circle at 88% 26%, #fff 0 1.5px, #ff9fcb 2px, transparent 4px),
		radial-gradient(circle at 80% 90%, #fff 0 1px, #ffc2df 2px, transparent 3.5px),
		radial-gradient(circle at 8% 70%, #fff 0 1px, #ffc2df 2px, transparent 3.5px);
	animation: tvl-brilho 2.2s ease-in-out infinite;
}

/* ---------- fundos do cabeçalho do perfil -------------------------------- */
[data-tvl-fundo] { position: relative; isolation: isolate; overflow: hidden; }
[data-tvl-fundo]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-tvl-fundo] > * { position: relative; z-index: 1; }
[data-tvl-fundo="nebulosa"]::before {
	inset: -20%;
	background:
		radial-gradient(40% 50% at 20% 30%, rgba(111, 92, 194, .75), transparent 70%),
		radial-gradient(35% 45% at 75% 35%, rgba(72, 208, 255, .45), transparent 70%),
		radial-gradient(45% 40% at 55% 85%, rgba(255, 79, 154, .35), transparent 70%),
		radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 60% 70%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 85% 15%, #fff, transparent), radial-gradient(1px 1px at 35% 55%, #cfc8ff, transparent),
		#0b0820;
	animation: tvl-deriva 22s ease-in-out infinite alternate;
}
[data-tvl-fundo="meteoros"]::before {   /* os meteoros em si são desenhados pelo loja-efeitos.js (efeito "meteoros") */
	background:
		radial-gradient(1px 1px at 12% 28%, #fff, transparent), radial-gradient(1px 1px at 70% 62%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 42% 14%, #dfe8ff, transparent), radial-gradient(1px 1px at 88% 40%, #fff, transparent),
		radial-gradient(1px 1px at 30% 80%, #cfd8ff, transparent), radial-gradient(1px 1px at 58% 45%, #fff, transparent),
		radial-gradient(120% 90% at 50% 120%, #2a1a5e, #090616 70%);
}
[data-tvl-fundo="imagem"]::before { background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)), var(--tvl-fundo-img, none) center / cover no-repeat, #111; }
/* o cabeçalho do perfil tem fundo próprio: com fundo comprado ele fica transparente */
section.page-title[data-tvl-fundo] { background: transparent !important; }
section.page-title[data-tvl-fundo] #particles-nasa { opacity: .5; }

/* ---------- temas (cores do bloco do perfil e das prévias) -------------- */
[data-tvl-tema="matrix"] {
	--tvl-a: #00ff66; --tvl-b: #0a3d1a; --tvl-fundo: #020b04; --tvl-texto: #b8ffcf;
	font-variant-ligatures: none;
}
[data-tvl-tema="alienigena"] { --tvl-a: #8ff08a; --tvl-b: #6f5cc2; --tvl-fundo: #0b0820; --tvl-texto: #e9e4ff; }
section.page-title[data-tvl-tema] { position: relative; isolation: isolate; overflow: hidden; background: var(--tvl-fundo) !important; }
section.page-title[data-tvl-tema] .page-title-row { position: relative; z-index: 2; }
/* fundo e tema deixam o cabeçalho sempre escuro: texto claro também no modo claro */
html:not(#tvl):not(#tvl) section.page-title:is([data-tvl-tema], [data-tvl-fundo]) .page-title-row :is(h1, h2, h3, h4, h5, p, small, span, strong, li, oi, a):not(.btn):not(.btn *) { color: #f4f2ff !important; -webkit-text-fill-color: #f4f2ff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }   /* text-fill: alguns textos recebem cor inline (estilos.js) que nenhuma regra vence */
section.page-title[data-tvl-tema="matrix"] :is(h1, h2, h3, h4, h5, .page-title-content, .page-title-content a:not(.btn)) { color: var(--tvl-texto) !important; -webkit-text-fill-color: var(--tvl-texto); text-shadow: 0 0 8px rgba(0, 255, 102, .45); }
section.page-title[data-tvl-tema="alienigena"] :is(h1, h2, h3) { text-shadow: 0 0 12px rgba(143, 240, 138, .5), 0 0 2px rgba(111, 92, 194, .8); }
/* canvas do efeito (loja-efeitos.js) */
.tvl-efeito-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
[data-tvl-tema="alienigena"]::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(60% 80% at 100% 0%, rgba(111, 92, 194, .35), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(53, 196, 63, .22), transparent 60%);
}

/* ---------- sprite de personagem (tira 56×48 por quadro) --------------- */
.tvl-sprite {
	--q: 1; display: block; width: 56px; height: 48px; image-rendering: pixelated;
	background: var(--tvl-spr) 0 0 / calc(56px * var(--q)) 48px no-repeat;
	transform: scale(var(--tvl-zoom, 2)); transform-origin: 50% 100%;
	animation: tvl-quadros calc(var(--q) * .45s) steps(var(--q)) infinite;
}
@keyframes tvl-quadros { to { background-position-x: calc(-56px * var(--q)); } }

/* ---------- animações ------------------------------------------------------ */
@keyframes tvl-gira { to { transform: rotate(360deg); } }
@keyframes tvl-pisca { 50% { opacity: .35; } }
@keyframes tvl-pulsa { 50% { filter: drop-shadow(0 0 16px rgba(255, 79, 154, .85)); transform: scale(1.03); } }
@keyframes tvl-brilho { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes tvl-deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 4%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
	[data-tvl-moldura]::before, [data-tvl-moldura]::after, [data-tvl-fundo]::before, .tvl-sprite { animation: none !important; }
}

/* ---------- perfil (@usuario): a foto ganha um invólucro só quando há moldura -- */
.tvl-perfil-foto { position: relative; display: inline-block; margin-right: 1rem; line-height: 0; border-radius: 50%; vertical-align: middle; }
.tvl-perfil-foto > img { margin-right: 0 !important; }

/* ============================================================================
   [2026-10-02 c] Coleção nova — gerada a partir de uma tabela só (molduras, fundos,
   temas gerais, linha Tática e temas de personagem). Mesmo padrão dos de cima:
   atributo data-tvl-* → desenho; quem tem o quê é decidido no PHP.
   ============================================================================ */
/* ---------- molduras novas ---------- */
[data-tvl-moldura="neon"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #00f0ff, #ff2bd6, #00f0ff, #7a5cff, #00f0ff);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(0,240,255,.8)); animation: tvl-gira 2.4s linear infinite;
}
[data-tvl-moldura="neon"]::after {
	inset: -13px; z-index: 2;
	background: radial-gradient(circle at 50% 0%, #ff2bd6 0 3px, transparent 4px), radial-gradient(circle at 100% 50%, #00f0ff 0 3px, transparent 4px), radial-gradient(circle at 50% 100%, #ff2bd6 0 3px, transparent 4px), radial-gradient(circle at 0% 50%, #00f0ff 0 3px, transparent 4px);
	animation: tvl-gira 7s linear infinite reverse, tvl-pisca 1.6s steps(2, jump-none) infinite;
}
[data-tvl-moldura="ouro"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #ffd84a, #fff3a6, #c48a2a, #ffe9a8, #8a6a1c, #ffd84a);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(255,216,74,.7)); animation: tvl-gira 5s linear infinite;
}
[data-tvl-moldura="ouro"]::after {
	inset: -14px; z-index: 2;
	background: radial-gradient(circle at 16% 16%, #fff 0 1.5px, #fff3a6 2px, transparent 4px), radial-gradient(circle at 88% 24%, #fff 0 1.5px, #fff3a6 2px, transparent 4px), radial-gradient(circle at 82% 88%, #fff 0 1px, #fff3a6 2px, transparent 3.5px), radial-gradient(circle at 8% 72%, #fff 0 1px, #fff3a6 2px, transparent 3.5px);
	animation: tvl-brilho 2s ease-in-out infinite;
}
[data-tvl-moldura="chamas"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #ff2b2b, #ff8a2a, #ffd84a, #ff5a1f, #ff2b2b);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(255,106,43,.85)); animation: tvl-gira 1.6s linear infinite, tvl-tremula .35s steps(2, jump-none) infinite;
}
[data-tvl-moldura="chamas"]::after {
	inset: -16px -10px -6px; z-index: 2; border-radius: 50% 50% 46% 46%;
	background: radial-gradient(18% 26% at 22% 22%, rgba(255,216,74,.9), transparent 70%), radial-gradient(16% 30% at 52% 6%, rgba(255,138,42,.95), transparent 70%), radial-gradient(18% 26% at 80% 20%, rgba(255,77,43,.9), transparent 70%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 12px));
	animation: tvl-chama .6s ease-in-out infinite alternate;
}
[data-tvl-moldura="gelo"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #e8fbff, #7fd6f2, #ffffff, #48d0ff, #e8fbff);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(127,214,242,.8)); animation: tvl-gira 7s linear infinite;
}
[data-tvl-moldura="gelo"]::after {
	inset: -14px; z-index: 2;
	background: radial-gradient(circle at 16% 16%, #ffffff 0 1.5px, #bdf3ff 2px, transparent 4px), radial-gradient(circle at 88% 24%, #ffffff 0 1.5px, #bdf3ff 2px, transparent 4px), radial-gradient(circle at 82% 88%, #ffffff 0 1px, #bdf3ff 2px, transparent 3.5px), radial-gradient(circle at 8% 72%, #ffffff 0 1px, #bdf3ff 2px, transparent 3.5px);
	animation: tvl-brilho 2s ease-in-out infinite;
}
[data-tvl-moldura="arcoiris"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(#ff4d6d 0% 17%, #ff8a2a 17% 33%, #ffd84a 33% 50%, #35c43f 50% 67%, #48d0ff 67% 83%, #a07bff 83% 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); animation: tvl-gira 4s steps(12) infinite;
}
[data-tvl-moldura="mira"]::before {
	inset: -8px; z-index: 0; border: 2px solid #e8a33a; box-shadow: 0 0 10px rgba(232,163,58,.7), inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px #b5c77a;
}
[data-tvl-moldura="mira"]::after {
	inset: -16px; z-index: 2; border-radius: 0;
	background: linear-gradient(#e8a33a, #e8a33a) 50% 0 / 2px 12px no-repeat, linear-gradient(#e8a33a, #e8a33a) 50% 100% / 2px 12px no-repeat, linear-gradient(#e8a33a, #e8a33a) 0 50% / 12px 2px no-repeat, linear-gradient(#e8a33a, #e8a33a) 100% 50% / 12px 2px no-repeat;
	animation: tvl-mira 2.4s ease-in-out infinite;
}
[data-tvl-moldura="vacuon"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #a11b31, #ff4d6d, #3a0911, #ff4d6d, #a11b31);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(255,77,109,.7)); animation: tvl-gira 3.6s linear infinite;
}
[data-tvl-moldura="vacuon"]::after {
	inset: -13px; z-index: 2;
	background: radial-gradient(circle at 50% 0%, #ffffff 0 3px, transparent 4px), radial-gradient(circle at 100% 50%, #ff4d6d 0 3px, transparent 4px), radial-gradient(circle at 50% 100%, #ffffff 0 3px, transparent 4px), radial-gradient(circle at 0% 50%, #ff4d6d 0 3px, transparent 4px);
	animation: tvl-gira 7s linear infinite reverse, tvl-pisca 1.6s steps(2, jump-none) infinite;
}
[data-tvl-moldura="obryn"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #781d4f, #cf752b, #3b2027, #d8679a, #781d4f);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(207,117,43,.6)); animation: tvl-gira 4.4s linear infinite;
}
[data-tvl-moldura="obryn"]::after {
	inset: -13px; z-index: 2;
	background: radial-gradient(circle at 50% 0%, #cf752b 0 3px, transparent 4px), radial-gradient(circle at 100% 50%, #8fd18a 0 3px, transparent 4px), radial-gradient(circle at 50% 100%, #cf752b 0 3px, transparent 4px), radial-gradient(circle at 0% 50%, #8fd18a 0 3px, transparent 4px);
	animation: tvl-gira 7s linear infinite reverse, tvl-pisca 1.6s steps(2, jump-none) infinite;
}
[data-tvl-moldura="zyra"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #f489f6, #9b3cf7, #ffffff, #f489f6);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(244,137,246,.75)); animation: tvl-gira 3s linear infinite;
}
[data-tvl-moldura="zyra"]::after {
	inset: -14px; z-index: 2;
	background: radial-gradient(circle at 16% 16%, #ffffff 0 1.5px, #f489f6 2px, transparent 4px), radial-gradient(circle at 88% 24%, #ffffff 0 1.5px, #f489f6 2px, transparent 4px), radial-gradient(circle at 82% 88%, #ffffff 0 1px, #f489f6 2px, transparent 3.5px), radial-gradient(circle at 8% 72%, #ffffff 0 1px, #f489f6 2px, transparent 3.5px);
	animation: tvl-brilho 2s ease-in-out infinite;
}
[data-tvl-moldura="aiko"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #e2e6f0, #7a86a6, #ffffff, #ffa216, #e2e6f0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(201,214,255,.7)); animation: tvl-gira 5s linear infinite;
}
[data-tvl-moldura="aiko"]::after {
	inset: -13px; z-index: 2;
	background: radial-gradient(circle at 50% 0%, #ffa216 0 3px, transparent 4px), radial-gradient(circle at 100% 50%, #ffffff 0 3px, transparent 4px), radial-gradient(circle at 50% 100%, #ffa216 0 3px, transparent 4px), radial-gradient(circle at 0% 50%, #ffffff 0 3px, transparent 4px);
	animation: tvl-gira 7s linear infinite reverse, tvl-pisca 1.6s steps(2, jump-none) infinite;
}
[data-tvl-moldura="kalu"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #0fefff, #0696db, #04193f, #0fefff);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(15,239,255,.75)); animation: tvl-gira 3.2s linear infinite;
}
[data-tvl-moldura="kalu"]::after {
	inset: -13px; z-index: 2;
	background: radial-gradient(circle at 50% 0%, #e7333b 0 3px, transparent 4px), radial-gradient(circle at 100% 50%, #0fefff 0 3px, transparent 4px), radial-gradient(circle at 50% 100%, #e7333b 0 3px, transparent 4px), radial-gradient(circle at 0% 50%, #0fefff 0 3px, transparent 4px);
	animation: tvl-gira 7s linear infinite reverse, tvl-pisca 1.6s steps(2, jump-none) infinite;
}
[data-tvl-moldura="lumi"]::before {
	inset: -7px; z-index: 0; background: conic-gradient(from 0deg, #d9c2ff, #8a68d6, #ffe14d, #ff9ec8, #d9c2ff);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	filter: drop-shadow(0 0 8px rgba(217,194,255,.8)); animation: tvl-gira 4s linear infinite;
}
[data-tvl-moldura="lumi"]::after {
	inset: -14px; z-index: 2;
	background: radial-gradient(circle at 16% 16%, #ffe14d 0 1.5px, #ffffff 2px, transparent 4px), radial-gradient(circle at 88% 24%, #ffe14d 0 1.5px, #ffffff 2px, transparent 4px), radial-gradient(circle at 82% 88%, #ffe14d 0 1px, #ffffff 2px, transparent 3.5px), radial-gradient(circle at 8% 72%, #ffe14d 0 1px, #ffffff 2px, transparent 3.5px);
	animation: tvl-brilho 2s ease-in-out infinite;
}
@keyframes tvl-tremula { 50% { filter: drop-shadow(0 0 14px rgba(255,138,42,.95)) brightness(1.15); } }
@keyframes tvl-chama { from { transform: translateY(1px) scaleY(.94); opacity: .75; } to { transform: translateY(-2px) scaleY(1.06); opacity: 1; } }
@keyframes tvl-mira { 50% { transform: scale(.92) rotate(45deg); opacity: .8; } }
/* ---------- fundos novos ---------- */
[data-tvl-fundo="aurora"]::before {
	background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 64% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 30%, #dff, transparent), linear-gradient(180deg, #03101a, #0a1f2c 60%, #0f2a2a);
}
[data-tvl-fundo="oceano"]::before { animation: tvl-raios 9s ease-in-out infinite alternate;
	background: linear-gradient(115deg, transparent 30%, rgba(120,230,255,.10) 38%, transparent 46%), linear-gradient(105deg, transparent 52%, rgba(120,230,255,.08) 58%, transparent 64%), radial-gradient(90% 70% at 50% -10%, rgba(62,230,240,.35), transparent 70%), linear-gradient(180deg, #06345a, #031a33 55%, #020c18);
}
[data-tvl-fundo="synthwave"]::before {   /* [2026-10-02 k] Synthwave elegante: sol listrado pousado no horizonte, montanhas em camadas, chão escuro (a grade vem do efeito) */
	background:
		linear-gradient(180deg, transparent calc(100% - min(64px, 34%)), #12031f calc(100% - min(64px, 34%)), #1a0530),
		conic-gradient(from 135deg at 50% 0, #250944 0 90deg, transparent 90deg) left 30px bottom min(64px, 34%) / 84px 26px repeat-x,
		conic-gradient(from 140deg at 50% 0, #3a1060 0 80deg, transparent 80deg) left 0 bottom min(64px, 34%) / 170px 46px repeat-x,
		repeating-linear-gradient(180deg, transparent 0 7px, #5c1460 7px 10px) 50% calc(100% - min(64px, 34%) - 2px) / 132px 30px no-repeat,
		radial-gradient(circle 64px at 50% calc(100% - min(64px, 34%)), #fff2a8 0, #ffc85a 30%, #ff7a59 62%, #ff3d8b 96%, transparent 100%),
		radial-gradient(ellipse 300px 110px at 50% calc(100% - min(64px, 34%)), rgba(255, 61, 139, .45), transparent 100%),
		radial-gradient(1px 1px at 14% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 32%, #ffd6f0, transparent), radial-gradient(1px 1px at 74% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 30%, #fff, transparent), radial-gradient(1px 1px at 58% 22%, #fff, transparent),
		linear-gradient(180deg, #0d0220 0%, #2a0845 45%, #6b1a6b 80%, #b02c7a);
}

[data-tvl-fundo="cidade"]::before {   /* [2026-10-02 i] mais calma: prédios baixos e escuros, poucas janelas, brilho no horizonte */
	background: linear-gradient(90deg, transparent 22px, rgba(255,216,74,.35) 22px 24px, transparent 24px) 0 calc(100% - 8px) / 440px 22px repeat-x, linear-gradient(90deg, transparent 94px, rgba(255,216,74,.35) 94px 96px, transparent 96px) 0 calc(100% - 8px) / 440px 16px repeat-x, linear-gradient(90deg, transparent 176px, rgba(255,216,74,.35) 176px 178px, transparent 178px) 0 calc(100% - 8px) / 440px 28px repeat-x, linear-gradient(90deg, transparent 269px, rgba(255,216,74,.35) 269px 271px, transparent 271px) 0 calc(100% - 8px) / 440px 12px repeat-x, linear-gradient(90deg, transparent 363px, rgba(255,216,74,.35) 363px 365px, transparent 365px) 0 calc(100% - 8px) / 440px 24px repeat-x, linear-gradient(90deg, transparent 8px, #1d1646 8px 38px, transparent 38px) 0 100% / 440px 40px repeat-x, linear-gradient(90deg, transparent 46px, #241b55 46px 68px, transparent 68px) 0 100% / 440px 58px repeat-x, linear-gradient(90deg, transparent 76px, #1d1646 76px 114px, transparent 114px) 0 100% / 440px 34px repeat-x, linear-gradient(90deg, transparent 126px, #2a2062 126px 146px, transparent 146px) 0 100% / 440px 66px repeat-x, linear-gradient(90deg, transparent 160px, #211950 160px 194px, transparent 194px) 0 100% / 440px 46px repeat-x, linear-gradient(90deg, transparent 210px, #1d1646 210px 236px, transparent 236px) 0 100% / 440px 54px repeat-x, linear-gradient(90deg, transparent 250px, #241b55 250px 290px, transparent 290px) 0 100% / 440px 30px repeat-x, linear-gradient(90deg, transparent 306px, #2a2062 306px 330px, transparent 330px) 0 100% / 440px 62px repeat-x, linear-gradient(90deg, transparent 346px, #1d1646 346px 382px, transparent 382px) 0 100% / 440px 42px repeat-x, linear-gradient(90deg, transparent 396px, #211950 396px 420px, transparent 420px) 0 100% / 440px 50px repeat-x, radial-gradient(70% 55% at 50% 100%, rgba(255, 79, 216, .28), transparent 70%), radial-gradient(1px 1px at 18% 22%, #fff, transparent), radial-gradient(1px 1px at 64% 14%, #fff, transparent), radial-gradient(1px 1px at 40% 34%, #cfc8ff, transparent), radial-gradient(1px 1px at 88% 40%, #fff, transparent), radial-gradient(circle 14px at 86% 24%, #fff6c8 0 85%, transparent 100%), radial-gradient(circle 34px at 86% 24%, rgba(255, 246, 200, .14), transparent 100%), linear-gradient(180deg, #0a0720, #1c1240 60%, #2c1756);
}
[data-tvl-fundo="galaxia"]::before {   /* [2026-10-02 i] galáxia de lado (núcleo + disco + braços) em px: igual na prévia e na capa; antes eram raios girando */
	inset: -10%; animation: tvl-deriva 40s ease-in-out infinite alternate;
	background:
		radial-gradient(ellipse 13px 9px at 64% 46%, #fff8e0 0, rgba(255, 230, 170, .9) 40%, transparent 100%),
		radial-gradient(ellipse 46px 16px at 64% 46%, rgba(255, 214, 150, .5), transparent 100%),
		radial-gradient(ellipse 120px 30px at 63% 47%, rgba(160, 123, 255, .5), transparent 100%),
		radial-gradient(ellipse 70px 14px at calc(64% - 56px) calc(46% - 6px), rgba(120, 170, 255, .4), transparent 100%),
		radial-gradient(ellipse 70px 14px at calc(64% + 56px) calc(46% + 6px), rgba(255, 120, 210, .35), transparent 100%),
		radial-gradient(ellipse 190px 52px at 63% 47%, rgba(90, 60, 200, .3), transparent 100%),
		radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 75%, #dfe8ff, transparent), radial-gradient(1px 1px at 82% 18%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 22% 40%, #fff, transparent), radial-gradient(1px 1px at 90% 80%, #cfc8ff, transparent), radial-gradient(1px 1px at 46% 85%, #fff, transparent), radial-gradient(1px 1px at 8% 60%, #fff, transparent),
		radial-gradient(60% 80% at 64% 46%, rgba(70, 40, 160, .25), transparent 70%),
		linear-gradient(180deg, #05031a, #0c0730);
}

[data-tvl-fundo="deserto"]::before {   /* [2026-10-02 i] em px: sol baixo e dunas, sem o muro (ficava esticado na capa) */
	background:
		radial-gradient(ellipse 260px 34px at 22% 100%, #8a5d33 0 70%, transparent 71%),
		radial-gradient(ellipse 340px 40px at 70% 104%, #6b4a26 0 70%, transparent 71%),
		radial-gradient(ellipse 220px 26px at 96% 100%, #a87442 0 70%, transparent 71%),
		linear-gradient(0deg, #5a3c20 0 10px, transparent 10px),
		radial-gradient(circle 26px at 78% 62%, #ffe6a8 0 88%, transparent 100%),
		radial-gradient(circle 90px at 78% 62%, rgba(255, 190, 110, .35), transparent 100%),
		radial-gradient(1px 1px at 18% 16%, #fff, transparent), radial-gradient(1px 1px at 46% 10%, #fff, transparent),
		linear-gradient(180deg, #241c3a, #6e3a5e 45%, #c56a52 75%, #f0a35e);
}
@property --tvl-radar { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tvl-radar { to { --tvl-radar: 360deg; } }
[data-tvl-fundo="radar"]::before {   /* [2026-10-02 i] em px: três anéis e a cruz num canto, grade fina — antes os anéis cobriam a capa toda.
	A varredura gira pela variável --tvl-radar (@property); sem suporte fica parada. Não usa ::after (é a divisória no perfil). */
	animation: tvl-radar 4s linear infinite;
	background:
		radial-gradient(circle 46px at 80% 58%, transparent 44px, rgba(181, 199, 122, .45) 45px, transparent 46px),
		radial-gradient(circle 92px at 80% 58%, transparent 90px, rgba(181, 199, 122, .32) 91px, transparent 92px),
		radial-gradient(circle 138px at 80% 58%, transparent 136px, rgba(181, 199, 122, .2) 137px, transparent 138px),
		radial-gradient(circle 3px at 80% 58%, #e8a33a 0 2px, transparent 3px),
		conic-gradient(from var(--tvl-radar, 0deg) at 80% 58%, rgba(181, 199, 122, .3), rgba(181, 199, 122, 0) 9%, transparent 9%) 0 0 / 100% 100% no-repeat,
		linear-gradient(rgba(181, 199, 122, .06) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(181, 199, 122, .06) 1px, transparent 1px) 0 0 / 24px 24px,
		radial-gradient(60% 90% at 80% 58%, rgba(60, 80, 30, .45), transparent 70%),
		#0b0f08;
}
[data-tvl-fundo="lua"]::before {
	background: radial-gradient(circle 24px at calc(82% + 11px) calc(32% - 7px), #170f2e 0 96%, transparent 100%), radial-gradient(circle 26px at 82% 32%, #fff6c8 0 94%, transparent 100%), radial-gradient(circle 60px at 82% 32%, rgba(255,246,200,.22), transparent 100%), radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 38% 14%, #ffe14d, transparent), radial-gradient(1px 1px at 60% 40%, #fff, transparent), radial-gradient(60% 40% at 20% 90%, rgba(217,194,255,.35), transparent 70%), radial-gradient(50% 35% at 70% 100%, rgba(255,158,200,.25), transparent 70%), linear-gradient(180deg, #110a22, #2a1a52);
}
@keyframes tvl-raios { to { transform: translateX(-6%); } }
/* ---------- temas novos: cores do bloco (cabeçalho do perfil e prévias) ---------- */
[data-tvl-tema="synthwave"] { --tvl-a: #ff6ad5; --tvl-b: #36e3ff; --tvl-fundo: #160627; --tvl-texto: #ffe3f8; }
section.page-title[data-tvl-tema="synthwave"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ff6ad5 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #36e3ff 22%, transparent), transparent 60%), #160627 !important; }
[data-tvl-tema="abissal"] { --tvl-a: #3ee6f0; --tvl-b: #1d4fa8; --tvl-fundo: #031426; --tvl-texto: #d8fbff; }
section.page-title[data-tvl-tema="abissal"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #3ee6f0 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #1d4fa8 22%, transparent), transparent 60%), #031426 !important; }
[data-tvl-tema="aurora"] { --tvl-a: #6dffb3; --tvl-b: #8a6bff; --tvl-fundo: #06121b; --tvl-texto: #e6fff3; }
section.page-title[data-tvl-tema="aurora"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #6dffb3 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #8a6bff 22%, transparent), transparent 60%), #06121b !important; }
[data-tvl-tema="tatico"] { --tvl-a: #e8a33a; --tvl-b: #6b7a3f; --tvl-fundo: #12150e; --tvl-texto: #ece6d2; }
section.page-title[data-tvl-tema="tatico"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #e8a33a 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #6b7a3f 22%, transparent), transparent 60%), #12150e !important; }
[data-tvl-tema="clutch"] { --tvl-a: #ffcc33; --tvl-b: #ff6a2b; --tvl-fundo: #0d0d10; --tvl-texto: #fff4d6; }
section.page-title[data-tvl-tema="clutch"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ffcc33 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #ff6a2b 22%, transparent), transparent 60%), #0d0d10 !important; }
[data-tvl-tema="vacuon"] { --tvl-a: #ff4d6d; --tvl-b: #5c0f1f; --tvl-fundo: #14050b; --tvl-texto: #ffe1e6; }
section.page-title[data-tvl-tema="vacuon"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ff4d6d 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #5c0f1f 22%, transparent), transparent 60%), #14050b !important; }
[data-tvl-tema="obryn"] { --tvl-a: #d8679a; --tvl-b: #cf752b; --tvl-fundo: #110a13; --tvl-texto: #f6e2ec; }
section.page-title[data-tvl-tema="obryn"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #d8679a 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #cf752b 22%, transparent), transparent 60%), #110a13 !important; }
[data-tvl-tema="zyra"] { --tvl-a: #f489f6; --tvl-b: #780bf7; --tvl-fundo: #14071f; --tvl-texto: #fde6ff; }
section.page-title[data-tvl-tema="zyra"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #f489f6 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #780bf7 22%, transparent), transparent 60%), #14071f !important; }
[data-tvl-tema="aiko"] { --tvl-a: #c9d6ff; --tvl-b: #667291; --tvl-fundo: #0b0f1e; --tvl-texto: #eef3ff; }
section.page-title[data-tvl-tema="aiko"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #c9d6ff 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #667291 22%, transparent), transparent 60%), #0b0f1e !important; }
[data-tvl-tema="kalu"] { --tvl-a: #0fefff; --tvl-b: #e7333b; --tvl-fundo: #03111f; --tvl-texto: #dcfbff; }
section.page-title[data-tvl-tema="kalu"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #0fefff 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #e7333b 22%, transparent), transparent 60%), #03111f !important; }
[data-tvl-tema="lumi"] { --tvl-a: #d9c2ff; --tvl-b: #ffe14d; --tvl-fundo: #110a22; --tvl-texto: #f3ecff; }
section.page-title[data-tvl-tema="lumi"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #d9c2ff 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #ffe14d 22%, transparent), transparent 60%), #110a22 !important; }
[data-tvl-tema="tatico"] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { [data-tvl-fundo="radar"]::before { animation: none !important; } }

/* [2026-10-02 l] Os selos com personagem nas molduras de personagem SAÍRAM: moldura não carrega personagem.
   O personagem do usuário aparece à parte, ao lado da foto, só se ele tiver um equipado (ou na prévia). */
[data-tvl-moldura="chamas"]::after {
	inset: -15px; z-index: 2; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 216, 74, .95) 0 5deg, rgba(255, 106, 43, .95) 5deg 11deg, rgba(255, 43, 43, .55) 11deg 15deg, transparent 15deg 22.5deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 11px), rgba(0, 0, 0, .55) calc(100% - 4px), transparent 100%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 11px), rgba(0, 0, 0, .55) calc(100% - 4px), transparent 100%);
	filter: blur(.4px) drop-shadow(0 0 6px rgba(255, 106, 43, .8));
	animation: tvl-gira 9s linear infinite, tvl-chama .45s ease-in-out infinite alternate;
}
[data-tvl-moldura="mira"]::before { inset: -6px; border: 3px solid #e8a33a; box-shadow: 0 0 10px rgba(232, 163, 58, .7), inset 0 0 0 3px rgba(0, 0, 0, .45); }
[data-tvl-moldura="mira"]::after {
	inset: -20px; border-radius: 0; animation: tvl-mira-pulsa 2s ease-in-out infinite;
	background:
		linear-gradient(#e8a33a, #e8a33a) 50% 0 / 3px 18px no-repeat, linear-gradient(#e8a33a, #e8a33a) 50% 100% / 3px 18px no-repeat,
		linear-gradient(#e8a33a, #e8a33a) 0 50% / 18px 3px no-repeat, linear-gradient(#e8a33a, #e8a33a) 100% 50% / 18px 3px no-repeat,
		radial-gradient(circle at 50% 50%, transparent 0 calc(50% - 2px), rgba(181, 199, 122, .5) calc(50% - 1px), transparent 50%);
	filter: drop-shadow(0 0 4px rgba(232, 163, 58, .8));
}
@keyframes tvl-mira-pulsa { 50% { transform: scale(.94); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { [data-tvl-moldura]::after { animation: none !important; } }

/* ---------- [2026-10-02 j] Molduras 8-bit (pixel art) ----------
   Imagem de 2 quadros (56×56 cada) em lib/config/img/loja/molduras/px-*.png, gerada por
   apagar/_fontes-colecao-2026-10-02/molduras_pixel.py. Sempre nítida (pixelated) e no mesmo
   tamanho relativo da foto (inset em %), do mini do provador à foto grande do perfil. */
:is([data-tvl-moldura="px-fogo"], [data-tvl-moldura="px-estrelas"], [data-tvl-moldura="px-disco"])::before {
	inset: -12.4%; z-index: 2; border-radius: 0; image-rendering: pixelated; image-rendering: crisp-edges;
	background-repeat: no-repeat; background-size: 200% 100%; background-position: 0 0;
	animation: tvl-px-quadros .9s steps(1, end) infinite;
}
:is([data-tvl-moldura="px-fogo"], [data-tvl-moldura="px-estrelas"], [data-tvl-moldura="px-disco"])::after { display: none; }
[data-tvl-moldura="px-fogo"]::before { background-image: url("../../img/loja/molduras/px-fogo.png"); animation-duration: .36s; filter: drop-shadow(0 0 6px rgba(255, 106, 43, .6)); }
[data-tvl-moldura="px-estrelas"]::before { background-image: url("../../img/loja/molduras/px-estrelas.png"); animation-duration: .8s; }
[data-tvl-moldura="px-disco"]::before { background-image: url("../../img/loja/molduras/px-disco.png"); animation-duration: .5s; filter: drop-shadow(0 0 6px rgba(53, 196, 63, .55)); }
@keyframes tvl-px-quadros { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } }

/* ---------- [2026-10-02 j] Chamas mais realista: três camadas de fogo desfocadas, subindo e tremulando ---------- */
[data-tvl-moldura="chamas"]::before {
	inset: -9px; z-index: 0;
	background: conic-gradient(from 180deg, #ff3b1f, #ff8a2a 20%, #ffd84a 30%, #ff5a1f 45%, #ff2b2b 55%, #ff8a2a 70%, #ffe08a 80%, #ff3b1f);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 7px), #000 calc(100% - 3px), transparent 100%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 7px), #000 calc(100% - 3px), transparent 100%);
	filter: blur(1.2px) drop-shadow(0 0 10px rgba(255, 106, 43, .9)) drop-shadow(0 -4px 12px rgba(255, 216, 74, .5));
	animation: tvl-gira 6s linear infinite, tvl-fogo-luz .18s ease-in-out infinite alternate;
}
[data-tvl-moldura="chamas"]::after {
	inset: -22px -14px -8px; z-index: 2; border-radius: 46% 46% 50% 50%;
	background:
		radial-gradient(9% 22% at 50% 10%, rgba(255, 240, 180, .95), rgba(255, 170, 60, .6) 50%, transparent 75%),
		radial-gradient(8% 18% at 30% 16%, rgba(255, 210, 90, .9), rgba(255, 106, 43, .5) 55%, transparent 78%),
		radial-gradient(8% 18% at 70% 16%, rgba(255, 210, 90, .9), rgba(255, 106, 43, .5) 55%, transparent 78%),
		radial-gradient(9% 16% at 12% 38%, rgba(255, 160, 60, .85), transparent 75%),
		radial-gradient(9% 16% at 88% 38%, rgba(255, 160, 60, .85), transparent 75%),
		radial-gradient(10% 12% at 8% 64%, rgba(255, 90, 31, .7), transparent 75%),
		radial-gradient(10% 12% at 92% 64%, rgba(255, 90, 31, .7), transparent 75%);
	-webkit-mask: radial-gradient(closest-side, transparent 70%, #000 78%); mask: radial-gradient(closest-side, transparent 70%, #000 78%);
	filter: blur(2px); mix-blend-mode: screen;
	animation: tvl-fogo-sobe .7s ease-in-out infinite alternate;
}
@keyframes tvl-fogo-luz { to { filter: blur(1.4px) drop-shadow(0 0 14px rgba(255, 138, 42, 1)) drop-shadow(0 -6px 16px rgba(255, 216, 74, .7)); } }
@keyframes tvl-fogo-sobe { from { transform: translateY(2px) scaleY(.92); opacity: .8; } to { transform: translateY(-3px) scaleY(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-tvl-moldura]::before { animation: none !important; } }

/* ---------- [2026-10-02 j] Temas de personagem: a capa sem fundo mostra o personagem em pixel art ----------
   (emblemas de lib/config/img/loja/emblemas/). Temas gerais e da linha Tática usam o fundo PAR na capa
   (tv_loja_pares_tema no PHP), então capa e página sempre são do mesmo tema. */
:is(section.page-title, .tvlp-cena)[data-tvl-tema="vacuon"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/s1.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #ff4d6d 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #ff4d6d 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #ff4d6d 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
:is(section.page-title, .tvlp-cena)[data-tvl-tema="obryn"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/s2.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #d8679a 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #d8679a 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #d8679a 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
:is(section.page-title, .tvlp-cena)[data-tvl-tema="zyra"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/s3.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #f489f6 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #f489f6 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #f489f6 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
:is(section.page-title, .tvlp-cena)[data-tvl-tema="aiko"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/s4.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #c9d6ff 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #c9d6ff 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #c9d6ff 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
:is(section.page-title, .tvlp-cena)[data-tvl-tema="kalu"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/s5.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #0fefff 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #0fefff 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #0fefff 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
@media (max-width: 767px) { :is(section.page-title, .tvlp-cena)[data-tvl-tema]:not([data-tvl-fundo])::before { background-size: auto 52%, 200px 90px, auto, 100% 6px; opacity: .55; } }

/* [2026-10-02 j] Chamas realista: coroa de línguas de fogo saindo da foto para fora (duas camadas defasadas),
   desfocadas e somando luz (screen), balançando e tremulando; o anel de brasa por baixo gira devagar. */
[data-tvl-moldura="chamas"]::after {
	inset: -24px; z-index: 2; border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, rgba(255, 240, 170, .95) 0deg, rgba(255, 150, 40, .9) 4deg, rgba(230, 50, 20, .55) 9deg, transparent 13deg, transparent 17deg),
		repeating-conic-gradient(from 8deg, rgba(255, 210, 90, .8) 0deg, rgba(255, 90, 20, .6) 5deg, transparent 11deg, transparent 23deg);
	-webkit-mask: radial-gradient(closest-side, transparent 64%, #000 70%, rgba(0, 0, 0, .6) 84%, transparent 100%);
	mask: radial-gradient(closest-side, transparent 64%, #000 70%, rgba(0, 0, 0, .6) 84%, transparent 100%);
	filter: blur(3px) saturate(1.3); mix-blend-mode: screen;
	animation: tvl-fogo-coroa .5s ease-in-out infinite alternate;
}
@keyframes tvl-fogo-coroa { from { transform: rotate(-3deg) scale(.97); opacity: .85; } to { transform: rotate(3deg) scale(1.04); opacity: 1; } }

/* [2026-10-02 k] Chamas com fogo de verdade (loja-molduras.js): canvas atrás da foto, sobra espaço para o fogo subir.
   Com o canvas ligado (.tvl-fogo-on), as línguas em CSS saem e fica só o anel de brasa por baixo. */
.tvl-fogo-canvas { position: absolute; left: -45%; top: -67.6%; width: 190%; height: 210%; z-index: 0; pointer-events: none; display: block; }
.tvl-fogo-on > img { position: relative; z-index: 1; }
.tvl-fogo-on[data-tvl-moldura="chamas"]::after { display: none; }
.tvl-fogo-on[data-tvl-moldura="chamas"]::before { filter: blur(1.5px) drop-shadow(0 0 8px rgba(255, 120, 40, .8)); animation: tvl-gira 8s linear infinite; }
/* [2026-10-02 l] Fogo 8-bit em canvas (loja-molduras.js): grade de pixels ampliada sem suavizar; a imagem fixa do ::before sai */
.tvl-fogo-px { image-rendering: pixelated; image-rendering: crisp-edges; }
.tvl-fogo-on[data-tvl-moldura="px-fogo"]::before { display: none; }

/* ---------- [2026-10-03 8bit] Conjuntos 8-bit: Fliperama e Plataforma ----------
   Tema, fundo e moldura vendidos SEPARADOS (e "Comprar o conjunto" na Loja). Arte em pixel própria:
   molduras/px-fliperama.png e px-plataforma.png (2 quadros 56×56) e fundos/fliperama.png e plataforma.png
   (faixa do chão que repete na horizontal), geradas por apagar/_fontes-loja-8bit-2026-10-03/gen8_pixel_art.py.
   A animação (invasores marchando / nuvens e moedas) é do loja-efeitos.js — só anima o que está na tela. */
:is([data-tvl-moldura="px-fliperama"], [data-tvl-moldura="px-plataforma"])::before {
	inset: -12.4%; z-index: 2; border-radius: 0; image-rendering: pixelated; image-rendering: crisp-edges;
	background-repeat: no-repeat; background-size: 200% 100%; background-position: 0 0;
	animation: tvl-px-quadros .9s steps(1, end) infinite;
}
:is([data-tvl-moldura="px-fliperama"], [data-tvl-moldura="px-plataforma"])::after { display: none; }
[data-tvl-moldura="px-fliperama"]::before { background-image: url("../../img/loja/molduras/px-fliperama.png"); animation-duration: .8s; filter: drop-shadow(0 0 6px rgba(255, 61, 242, .5)); }
[data-tvl-moldura="px-plataforma"]::before { background-image: url("../../img/loja/molduras/px-plataforma.png"); animation-duration: .7s; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }

[data-tvl-fundo="fliperama"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/fliperama.png") 0 100% / auto min(80px, 46%) repeat-x,
		radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 34% 30%, #ffd6fb, transparent), radial-gradient(1.5px 1.5px at 58% 12%, #fff, transparent),
		radial-gradient(1px 1px at 76% 26%, #c9fbff, transparent), radial-gradient(1px 1px at 90% 14%, #fff, transparent), radial-gradient(1px 1px at 46% 44%, #fff, transparent),
		radial-gradient(70% 50% at 50% 100%, rgba(255, 61, 242, .28), transparent 70%),
		linear-gradient(180deg, #05021a 0%, #0f0634 55%, #24083f 100%);
}
[data-tvl-fundo="plataforma"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/plataforma.png") 0 100% / auto min(96px, 58%) repeat-x,
		radial-gradient(circle 16px at 84% 30%, #ffe79a 0 80%, transparent 100%),
		radial-gradient(circle 40px at 84% 30%, rgba(255, 200, 110, .25), transparent 100%),
		linear-gradient(180deg, #1d2457 0%, #4a3f86 42%, #c46a6a 78%, #f2a65a 100%);
}
[data-tvl-tema="fliperama"] { --tvl-a: #ff3df2; --tvl-b: #35f0ff; --tvl-fundo: #0b0620; --tvl-texto: #ffe6fd; }
section.page-title[data-tvl-tema="fliperama"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ff3df2 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #35f0ff 22%, transparent), transparent 60%), #0b0620 !important; }
[data-tvl-tema="plataforma"] { --tvl-a: #ff8a2a; --tvl-b: #5ad15a; --tvl-fundo: #1a1640; --tvl-texto: #fff1e0; }
section.page-title[data-tvl-tema="plataforma"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ff8a2a 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #5ad15a 22%, transparent), transparent 60%), #1a1640 !important; }
/* títulos com sombra "dura" de pixel (sem desfoque), como nos jogos de 8 bits */
section.page-title[data-tvl-tema="fliperama"] :is(h1, h2, h3) { text-shadow: 2px 2px 0 rgba(53, 240, 255, .55), -1px -1px 0 rgba(255, 61, 242, .45) !important; letter-spacing: .02em; }
section.page-title[data-tvl-tema="plataforma"] :is(h1, h2, h3) { text-shadow: 2px 2px 0 rgba(0, 0, 0, .55) !important; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { :is([data-tvl-moldura="px-fliperama"], [data-tvl-moldura="px-plataforma"])::before { animation: none !important; } }

/* [2026-10-03 ad] Personagem grande na capa (temas de personagem) só com a chave ligada pelo dono do perfil
   (Inventário → "Personagem no fundo"; o PHP põe data-tvl-emblema). Padrão: desligado. O Provador continua mostrando. */
section.page-title[data-tvl-tema]:not([data-tvl-fundo]):not([data-tvl-emblema])::before { content: none !important; }

/* ---------- [2026-10-04 ak] Conjuntos dos personagens novos: Rael, Roldana, Trovisco, Quartzo e Brasa ----------
   Cada um tem tema (com o personagem na capa), fundo (o cenário do jogo dele) e moldura 8-bit (2 quadros 56×56).
   Imagens: img/loja/molduras/px-<tema>.png, img/loja/fundos/<fundo>.png (faixa que repete na horizontal, recortada
   do próprio cenário do jogo — perfil-cenario.js) e img/loja/emblemas/sd…sh.png. Fontes: apagar/_fontes-personagens-2026-10-04/. */
:is([data-tvl-moldura="px-rael"], [data-tvl-moldura="px-roldana"], [data-tvl-moldura="px-trovisco"], [data-tvl-moldura="px-quartzo"], [data-tvl-moldura="px-brasa"])::before {
	inset: -12.4%; z-index: 2; border-radius: 0; image-rendering: pixelated; image-rendering: crisp-edges;
	background-repeat: no-repeat; background-size: 200% 100%; background-position: 0 0;
	animation: tvl-px-quadros .9s steps(1, end) infinite;
}
:is([data-tvl-moldura="px-rael"], [data-tvl-moldura="px-roldana"], [data-tvl-moldura="px-trovisco"], [data-tvl-moldura="px-quartzo"], [data-tvl-moldura="px-brasa"])::after { display: none; }
[data-tvl-moldura="px-rael"]::before { background-image: url("../../img/loja/molduras/px-rael.png"); filter: drop-shadow(0 0 6px rgba(224,65,74,.5)); }
[data-tvl-moldura="px-roldana"]::before { background-image: url("../../img/loja/molduras/px-roldana.png"); filter: drop-shadow(0 0 6px rgba(255,138,42,.5)); }
[data-tvl-moldura="px-trovisco"]::before { background-image: url("../../img/loja/molduras/px-trovisco.png"); filter: drop-shadow(0 0 6px rgba(95,240,216,.5)); }
[data-tvl-moldura="px-quartzo"]::before { background-image: url("../../img/loja/molduras/px-quartzo.png"); filter: drop-shadow(0 0 6px rgba(124,196,255,.5)); }
[data-tvl-moldura="px-brasa"]::before { background-image: url("../../img/loja/molduras/px-brasa.png"); filter: drop-shadow(0 0 6px rgba(255,106,26,.5)); }
[data-tvl-fundo="cais"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/cais.png") 0 100% / auto min(120px, 66%) repeat-x,
		radial-gradient(circle 14px at 80% 26%, #f3ecd2 0 85%, transparent 100%), radial-gradient(circle 40px at 80% 26%, rgba(255,240,200,.16), transparent 100%), linear-gradient(100deg, transparent 30%, rgba(180,220,255,.08) 34%, transparent 38%),
		linear-gradient(180deg, #090c1b 0%, #1a1838 60%, #43263f 100%);
}
[data-tvl-fundo="sucata"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/sucata.png") 0 100% / auto min(120px, 66%) repeat-x,
		radial-gradient(circle 30px at 30% 70%, #ff9a4a 0 85%, transparent 100%), radial-gradient(circle 70px at 30% 70%, rgba(255,170,90,.18), transparent 100%),
		linear-gradient(180deg, #1d1222 0%, #4a2430 60%, #b25a2c 100%);
}
[data-tvl-fundo="gruta"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/gruta.png") 0 100% / auto min(120px, 66%) repeat-x,
		linear-gradient(180deg, #0b1316 0 14%, transparent 14%), radial-gradient(circle 6px at 22% 40%, transparent 0 60%, #c8fff2 62% 100%, transparent 100%), radial-gradient(circle 5px at 64% 30%, transparent 0 55%, #9ff7e0 58% 100%, transparent 100%),
		linear-gradient(180deg, #0e171b 0%, #1c2c31 60%, #2c4046 100%);
}
[data-tvl-fundo="mina"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/mina.png") 0 100% / auto min(120px, 66%) repeat-x,
		radial-gradient(circle 12px at 78% 24%, #eef6ff 0 85%, transparent 100%), radial-gradient(circle 36px at 78% 24%, rgba(200,230,255,.16), transparent 100%),
		linear-gradient(176deg, transparent 18%, rgba(110,255,200,.14) 26%, rgba(120,160,255,.10) 34%, transparent 42%),
		radial-gradient(1.5px 1.5px at 14% 20%, #ffffff, transparent), radial-gradient(1.5px 1.5px at 38% 34%, #e6f7ff, transparent), radial-gradient(1.5px 1.5px at 58% 16%, #ffffff, transparent), radial-gradient(1.5px 1.5px at 90% 40%, #e6f7ff, transparent),
		linear-gradient(180deg, #08122a 0%, #1d3560 60%, #6a9ad0 100%);   /* [2026-10-04 al] montanhas de gelo */
}
[data-tvl-fundo="forja"]::before {
	image-rendering: pixelated; image-rendering: crisp-edges;
	background:
		url("../../img/loja/fundos/forja.png") 0 100% / auto min(120px, 66%) repeat-x,
		linear-gradient(0deg, rgba(255,106,26,.30), transparent 45%),
		linear-gradient(180deg, #12060a 0%, #3a0d12 60%, #8a2a14 100%);
}
[data-tvl-tema="rael"] { --tvl-a: #e0414a; --tvl-b: #ffd84a; --tvl-fundo: #0b0d1a; --tvl-texto: #ffe6e0; }
section.page-title[data-tvl-tema="rael"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #e0414a 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #ffd84a 22%, transparent), transparent 60%), #0b0d1a !important; }
:is(section.page-title, .tvlp-cena)[data-tvl-tema="rael"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/sd.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #e0414a 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #e0414a 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #e0414a 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
[data-tvl-tema="roldana"] { --tvl-a: #ff8a2a; --tvl-b: #ffcc33; --tvl-fundo: #1a1013; --tvl-texto: #fff0e2; }
section.page-title[data-tvl-tema="roldana"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ff8a2a 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #ffcc33 22%, transparent), transparent 60%), #1a1013 !important; }
:is(section.page-title, .tvlp-cena)[data-tvl-tema="roldana"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/se.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #ff8a2a 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #ff8a2a 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #ff8a2a 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
[data-tvl-tema="trovisco"] { --tvl-a: #5ff0d8; --tvl-b: #2fb8a8; --tvl-fundo: #0b1316; --tvl-texto: #e2fffa; }
section.page-title[data-tvl-tema="trovisco"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #5ff0d8 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #2fb8a8 22%, transparent), transparent 60%), #0b1316 !important; }
:is(section.page-title, .tvlp-cena)[data-tvl-tema="trovisco"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/sf.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #5ff0d8 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #5ff0d8 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #5ff0d8 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
[data-tvl-tema="quartzo"] { --tvl-a: #7cc4ff; --tvl-b: #3f86c9; --tvl-fundo: #070b16; --tvl-texto: #e6f3ff; }
section.page-title[data-tvl-tema="quartzo"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #7cc4ff 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #3f86c9 22%, transparent), transparent 60%), #070b16 !important; }
:is(section.page-title, .tvlp-cena)[data-tvl-tema="quartzo"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/sg.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #7cc4ff 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #7cc4ff 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #7cc4ff 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
[data-tvl-tema="brasa"] { --tvl-a: #ff6a1a; --tvl-b: #ffd84a; --tvl-fundo: #12060a; --tvl-texto: #ffe9dc; }
section.page-title[data-tvl-tema="brasa"] { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #ff6a1a 30%, transparent), transparent 60%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, #ffd84a 22%, transparent), transparent 60%), #12060a !important; }
:is(section.page-title, .tvlp-cena)[data-tvl-tema="brasa"]:not([data-tvl-fundo])::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated;
	background:
		url("../../img/loja/emblemas/sh.png") right 8% bottom 6px / auto 74% no-repeat,
		radial-gradient(closest-side, color-mix(in srgb, #ff6a1a 40%, transparent), transparent) right calc(8% - 40px) bottom -30px / 260px 120px no-repeat,
		linear-gradient(0deg, color-mix(in srgb, #ff6a1a 22%, transparent) 0 6px, transparent 6px),
		repeating-linear-gradient(90deg, color-mix(in srgb, #ff6a1a 10%, transparent) 0 16px, transparent 16px 32px) 0 100% / 100% 6px no-repeat;
	opacity: .85;
}
@media (max-width: 767px) { :is(:is(section.page-title, .tvlp-cena)[data-tvl-tema="rael"], :is(section.page-title, .tvlp-cena)[data-tvl-tema="roldana"], :is(section.page-title, .tvlp-cena)[data-tvl-tema="trovisco"], :is(section.page-title, .tvlp-cena)[data-tvl-tema="quartzo"], :is(section.page-title, .tvlp-cena)[data-tvl-tema="brasa"])[data-tvl-tema]:not([data-tvl-fundo])::before { background-size: auto 52%, 200px 90px, auto, 100% 6px; opacity: .55; } }
@media (prefers-reduced-motion: reduce) { :is([data-tvl-moldura="px-rael"], [data-tvl-moldura="px-roldana"], [data-tvl-moldura="px-trovisco"], [data-tvl-moldura="px-quartzo"], [data-tvl-moldura="px-brasa"])::before { animation: none !important; } }