/* =====================================================================
   Kenfeh — molduras animadas extras e fundos de perfil animados
   (temas de jogos e anime/geek — designs originais)
   ===================================================================== */

/* ---------- MOLDURAS ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes pulseGlow { 50% { opacity: .45; } }
.frame-rgb::before { --frame-bg: conic-gradient(from var(--ang), #ff0040, #ff8a00, #ffe600, #00ff6a, #00d0ff, #7a3cff, #ff00c8, #ff0040); animation: ang 1s linear infinite; }
.frame-rgb::after { box-shadow: 0 0 14px rgba(255,0,200,.5), 0 0 22px rgba(0,208,255,.35); animation: rgbGlow 3s linear infinite; }
@keyframes rgbGlow { 33% { box-shadow: 0 0 14px rgba(0,255,106,.55), 0 0 22px rgba(255,138,0,.35); } 66% { box-shadow: 0 0 14px rgba(0,208,255,.55), 0 0 22px rgba(255,0,64,.35); } }

.frame-arcade::before { border-radius: 18%; --frame-bg: repeating-conic-gradient(from var(--ang), #ffe600 0 12.5%, #ff3d9a 0 25%, #29d9ff 0 37.5%, #0b0d1a 0 50%); animation: ang 2s steps(8) infinite; }
.frame-arcade::after { border-radius: 18%; box-shadow: 0 0 0 2px #0b0d1a, 0 0 12px rgba(255,230,0,.4); }
.frame-arcade > .avatar { border-radius: 14% !important; }

.frame-electric::before { --frame-bg: conic-gradient(from var(--ang), #e3f2ff 0 5%, #2979ff 10%, #e3f2ff 14%, #00b0ff 30%, #fff 33%, #2962ff 50%, #e3f2ff 54%, #00e5ff 70%, #fff 73%, #2979ff 90%, #e3f2ff 100%); animation: ang .7s steps(6) infinite; }
.frame-electric::after { box-shadow: 0 0 10px #40c4ff, 0 0 20px rgba(41,121,255,.6); animation: zap .18s steps(2) infinite; }
@keyframes zap { 50% { box-shadow: 0 0 4px #40c4ff, 0 0 26px rgba(0,229,255,.9); transform: scale(1.03); } }

.frame-chakra::before { --frame-bg: conic-gradient(from var(--ang), #ff6d00, #ffd180, #ff9100, #ff3d00, #ffab40, #ff6d00); animation: ang 1.4s linear infinite; }
.frame-chakra::after { inset: calc(var(--fw) * -2.4); background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,145,0,.55) 25%, transparent 32% 52%, rgba(255,210,128,.5) 58%, transparent 64% 82%, rgba(255,109,0,.55) 88%, transparent 94%); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); animation: spin 1.8s linear infinite; }

.frame-tomoe::before { --frame-bg: radial-gradient(circle at 50% 4%, #0b0d1a 0 7%, transparent 8%), radial-gradient(circle at 89% 73%, #0b0d1a 0 7%, transparent 8%), radial-gradient(circle at 11% 73%, #0b0d1a 0 7%, transparent 8%), radial-gradient(circle, #d50000 60%, #8b0000 100%); animation: spin 2.2s linear infinite; }
.frame-tomoe::after { box-shadow: 0 0 14px rgba(213,0,0,.6); animation: pulseGlow 2.2s ease-in-out infinite; }

.frame-sakura::before { --frame-bg: conic-gradient(from var(--ang), #ffc1e3, #ff80ab, #fff0f6, #f48fb1, #ffc1e3); animation: ang 5s linear infinite; }
.frame-sakura::after { inset: calc(var(--fw) * -3); background: radial-gradient(ellipse 10% 6% at 50% 4%, #ff80ab 90%, transparent), radial-gradient(ellipse 6% 10% at 96% 50%, #ffc1e3 90%, transparent), radial-gradient(ellipse 10% 6% at 50% 96%, #f48fb1 90%, transparent), radial-gradient(ellipse 6% 10% at 4% 50%, #ffe0f0 90%, transparent), radial-gradient(ellipse 7% 5% at 85% 15%, #ff80ab 90%, transparent), radial-gradient(ellipse 5% 7% at 15% 85%, #ffc1e3 90%, transparent); animation: spin 7s linear infinite; }

.frame-magic::before { --frame-bg: repeating-conic-gradient(from var(--ang), #b388ff 0 3deg, transparent 3deg 9deg), conic-gradient(#7c4dff, #e040fb, #7c4dff); animation: ang 6s linear infinite; }
.frame-magic::after { inset: calc(var(--fw) * -2.6); border: 1.5px dashed rgba(224,64,251,.8); box-shadow: 0 0 12px rgba(124,77,255,.6); animation: spinRev 9s linear infinite; }

.frame-lava::before { --frame-bg: conic-gradient(from var(--ang), #3e0000, #ff3d00, #ffab00, #ff1744, #6d0000, #ff6d00, #3e0000); animation: ang 3s linear infinite; }
.frame-lava::after { box-shadow: 0 0 16px rgba(255,61,0,.65), inset 0 0 8px rgba(255,171,0,.4); animation: pulseGlow 1.6s ease-in-out infinite; }

.frame-void::before { --frame-bg: conic-gradient(from var(--ang), #000, #6200ea, #000, #d500f9, #000); animation: ang 2.5s linear infinite; }
.frame-void::after { inset: calc(var(--fw) * -2.2); background: conic-gradient(from 0deg, transparent, rgba(98,0,234,.6), transparent 40%, rgba(213,0,249,.5), transparent 75%); filter: blur(4px); animation: spinRev 3.5s linear infinite; }

.frame-hud::before { --frame-bg: repeating-conic-gradient(from var(--ang), #29d9ff 0 20deg, transparent 20deg 30deg); animation: ang 4s linear infinite; }
.frame-hud::after { inset: calc(var(--fw) * -2.6); border: 2px solid transparent; border-top-color: #29d9ff; border-bottom-color: #3ddc97; box-shadow: 0 0 10px rgba(41,217,255,.5); animation: spinRev 2s linear infinite; }

.frame-kawaii::before { --frame-bg: conic-gradient(from var(--ang), #ffd6e8, #c3f0ff, #fff6b8, #e3d4ff, #ffd6e8); animation: ang 4s linear infinite; }
.frame-kawaii::after { inset: calc(var(--fw) * -2.8); background: radial-gradient(circle 6% at 50% 5%, #ff80ab 98%, transparent), radial-gradient(circle 5% at 95% 50%, #ffd54f 98%, transparent), radial-gradient(circle 6% at 50% 95%, #80d8ff 98%, transparent), radial-gradient(circle 5% at 5% 50%, #b388ff 98%, transparent); animation: spin 6s linear infinite, bounceS 1.2s ease-in-out infinite; }
@keyframes bounceS { 50% { scale: 1.06; } }

.frame-legend::before { --frame-bg: conic-gradient(from var(--ang), #8a6d1d, #fff3b0 8%, #c9a227 20%, #ffe58a 40%, #8a6d1d 55%, #fff8d6 62%, #c9a227 80%, #8a6d1d); animation: ang 3s linear infinite; }
.frame-legend::after { box-shadow: 0 0 14px rgba(255,213,79,.6), 0 0 28px rgba(255,160,0,.3); animation: pulseGlow 2s ease-in-out infinite; }

.frame-zone::before { --frame-bg: conic-gradient(from var(--ang), #1565c0, #7c4dff, #00b0ff, #1565c0); animation: ang 3s linear infinite; }
.frame-zone::after { inset: calc(var(--fw) * -3.5); border: 2px solid rgba(124,77,255,.8); animation: zoneClose 2.4s ease-in infinite; }
@keyframes zoneClose { from { transform: scale(1.25); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.95); opacity: 0; } }

.frame-matrix::before { --frame-bg: repeating-conic-gradient(from var(--ang), #00ff41 0 6deg, #003b00 6deg 12deg, #00c832 12deg 15deg, transparent 15deg 22deg); animation: ang 3s steps(30) infinite; }
.frame-matrix::after { box-shadow: 0 0 12px rgba(0,255,65,.45); }

.frame-ki::before { --frame-bg: conic-gradient(from var(--ang), #fff59d, #ffd600, #fff, #ffab00, #fff59d); animation: ang .9s linear infinite; }
.frame-ki::after { inset: calc(var(--fw) * -2.5); border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; box-shadow: 0 -6px 18px rgba(255,214,0,.85), 0 0 26px rgba(255,234,0,.5); animation: kiFlare .35s ease-in-out infinite alternate; }
@keyframes kiFlare { to { box-shadow: 0 -12px 24px rgba(255,214,0,.95), 0 0 34px rgba(255,234,0,.65); transform: scaleY(1.06); } }

.frame-ocean::before { --frame-bg: conic-gradient(from var(--ang), #01579b, #4fc3f7, #e1f5fe, #0288d1, #01579b); animation: ang 4s ease-in-out infinite; }
.frame-ocean::after { box-shadow: 0 0 12px rgba(79,195,247,.5); animation: pulseGlow 3s ease-in-out infinite; }

.frame-shadow::before { --frame-bg: conic-gradient(from var(--ang), #000, #37474f, #000, #263238, #000); animation: ang 3s linear infinite; }
.frame-shadow::after { inset: calc(var(--fw) * -2.4); background: conic-gradient(from 0deg, rgba(0,0,0,.9), transparent 30%, rgba(38,50,56,.8) 50%, transparent 80%); filter: blur(5px); animation: spin 2.4s linear infinite; }

.frame-heart::before { --frame-bg: conic-gradient(from var(--ang), #ff1744, #ff80ab, #ff1744); animation: ang 3s linear infinite, heartBeat 1s ease-in-out infinite; }
@keyframes heartBeat { 15% { scale: 1.08; } 30% { scale: 1; } 45% { scale: 1.06; } }
.frame-heart::after { box-shadow: 0 0 12px rgba(255,23,68,.55); }

/* ---------- FUNDOS DE PERFIL ANIMADOS ---------- */
.bnr { position: relative; overflow: hidden; isolation: isolate; }
.bnr::before, .bnr::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
@keyframes slideX { to { background-position-x: var(--to, -200px); } }
@keyframes slideY { to { background-position-y: var(--to, 200px); } }
@keyframes drift { to { transform: translateX(-50%); } }

/* Synthwave: sol + grade andando */
.bnr-synthwave { background: linear-gradient(#1a0033, #5b0a63 55%, #ff3d9a 56%, #120024 57%); }
.bnr-synthwave::before { inset: 0 0 auto; height: 56%; background: radial-gradient(circle at 50% 100%, #ffd54f 0 22%, #ff6f00 30%, transparent 31%), repeating-linear-gradient(transparent 0 6px, #5b0a63 6px 8px); background-blend-mode: normal; -webkit-mask: linear-gradient(#000, #000); }
.bnr-synthwave::after { top: 57%; background: repeating-linear-gradient(90deg, rgba(255,61,154,.8) 0 2px, transparent 2px 28px), repeating-linear-gradient(rgba(41,217,255,.8) 0 2px, transparent 2px 14px); transform: perspective(60px) rotateX(55deg); transform-origin: top; animation: slideY 1s linear infinite; --to: 14px; }

/* Arcade 8-bit: estrelas de pixel + scanlines */
.bnr-arcade { background: #0b0d1a; }
.bnr-arcade::before { background: radial-gradient(#ffe600 1.5px, transparent 2px) 0 0 / 40px 30px, radial-gradient(#29d9ff 1.5px, transparent 2px) 20px 15px / 40px 30px, radial-gradient(#ff3d9a 1.5px, transparent 2px) 10px 5px / 60px 50px; animation: slideX 6s linear infinite; --to: -240px; }
.bnr-arcade::after { background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.35) 2px 4px), linear-gradient(90deg, rgba(255,61,154,.25), transparent 30%, transparent 70%, rgba(41,217,255,.25)); }

/* Código caindo */
.bnr-matrix { background: #000a02; }
.bnr-matrix::before { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,255,65,.0) 9px 10px), linear-gradient(transparent 0 40%, #00ff41 40% 41%, transparent 41%) 0 0 / 10px 60px, linear-gradient(transparent 0 70%, #00c832 70% 72%, transparent 72%) 5px 0 / 14px 44px, linear-gradient(transparent 0 20%, #b9ffb9 20% 21%, transparent 21%) 3px 0 / 18px 80px; animation: slideY 2.4s linear infinite; --to: 240px; }
.bnr-matrix::after { background: linear-gradient(#000a02, transparent 30%, transparent 70%, #000a02); }

/* Blocos caindo (estilo Tetris) */
.bnr-blocks { background: linear-gradient(160deg, #0d1b4b, #1a0b40); }
.bnr-blocks::before { background: linear-gradient(#29d9ff 0 0) 10px 0 / 14px 14px, linear-gradient(#ff3d9a 0 0) 60px 30px / 14px 14px, linear-gradient(#ffd54f 0 0) 120px 10px / 14px 14px, linear-gradient(#3ddc97 0 0) 190px 50px / 14px 14px, linear-gradient(#b388ff 0 0) 250px 20px / 14px 14px; background-repeat: repeat-y; background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, 14px 14px; animation: blocksFall 3s steps(12) infinite; }
@keyframes blocksFall { to { background-position: 10px 120px, 60px 150px, 120px 130px, 190px 170px, 250px 140px; } }
.bnr-blocks::after { inset: auto 0 0; height: 14px; background: repeating-linear-gradient(90deg, #29d9ff 0 14px, #ff3d9a 14px 28px, #ffd54f 28px 42px, #3ddc97 42px 56px); opacity: .85; }

/* FPS: mira + radar */
.bnr-fps { background: radial-gradient(circle at 75% 50%, #1b2a1b, #050805); }
.bnr-fps::before { background: radial-gradient(circle at 75% 50%, transparent 0 18px, #ff3d3d 18px 20px, transparent 20px 34px, rgba(255,61,61,.5) 34px 35px, transparent 35px), linear-gradient(90deg, transparent calc(75% - 1px), rgba(255,61,61,.7) calc(75% - 1px) calc(75% + 1px), transparent calc(75% + 1px)), linear-gradient(transparent calc(50% - 1px), rgba(255,61,61,.7) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.bnr-fps::after { left: 50%; width: 50%; background: conic-gradient(from 0deg at 50% 50%, rgba(61,220,151,.45), transparent 25%); animation: spin 3s linear infinite; -webkit-mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%); mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%); }

/* Battle royale: a zona fechando */
.bnr-zone { background: radial-gradient(circle at 50% 120%, #2e7d32, #1b3a1b 60%, #0b1a0b); }
.bnr-zone::before { background: radial-gradient(circle at 50% 60%, transparent 0 40%, rgba(124,77,255,.55) 41%, rgba(98,0,234,.75)); animation: zoneB 4s ease-in-out infinite; }
@keyframes zoneB { 50% { background-size: 70% 70%; background-position: center; } }
.bnr-zone::after { background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.05) 18px 20px); animation: slideX 2s linear infinite; --to: -40px; }

/* Espaço: estrelas em velocidade */
.bnr-space { background: radial-gradient(ellipse at 50% 50%, #1a1446, #000 70%); }
.bnr-space::before { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 80% 20%, #fff, transparent), radial-gradient(2px 2px at 40% 80%, #b3e5fc, transparent), radial-gradient(1px 1px at 90% 60%, #fff, transparent); background-size: 120px 96px; animation: warp 1.6s linear infinite; }
@keyframes warp { from { transform: scale(1); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.bnr-space::after { background: radial-gradient(1px 1px at 10% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #fff, transparent), radial-gradient(1px 1px at 30% 90%, #fff, transparent); background-size: 90px 70px; animation: warp 1.6s linear infinite .8s; }

/* Corrida: linhas de velocidade */
.bnr-racing { background: linear-gradient(90deg, #b71c1c, #ff6f00); }
.bnr-racing::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 40px, rgba(255,255,255,.55) 40px 90px, rgba(255,255,255,0) 90px 160px) 0 20% / 320px 3px no-repeat, repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.45) 60px 140px) 0 55% / 400px 2px no-repeat, repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.5) 30px 70px) 0 80% / 260px 2px no-repeat; background-repeat: repeat-x; animation: slideX .5s linear infinite; --to: -160px; }
.bnr-racing::after { background: repeating-linear-gradient(45deg, #fff 0 8px, #111 8px 16px) right 0 top 0 / 24px 100% no-repeat; opacity: .9; }

/* RPG: floresta mágica com faíscas subindo */
.bnr-rpg { background: linear-gradient(#0a1f12, #12321e 60%, #071209); }
.bnr-rpg::before { background: radial-gradient(circle, #ffd54f 0 1.5px, transparent 2.5px) 0 0 / 50px 40px, radial-gradient(circle, #b2ff59 0 1px, transparent 2px) 25px 20px / 60px 50px; animation: slideY 4s linear infinite; --to: -120px; opacity: .9; }
.bnr-rpg::after { background: linear-gradient(transparent 55%, #071209 56%) , conic-gradient(from 150deg at 15% 100%, transparent 0 20%, #071209 0 40%, transparent 0) , conic-gradient(from 150deg at 45% 100%, transparent 0 20%, #0b1a10 0 40%, transparent 0), conic-gradient(from 150deg at 80% 100%, transparent 0 20%, #071209 0 40%, transparent 0); }

/* Cyberpunk: cidade com chuva */
.bnr-cyber { background: linear-gradient(#12002b, #3a0a5e 60%, #ff3d9a 140%); }
.bnr-cyber::before { inset: auto 0 0; height: 60%; background: linear-gradient(#0b0d1a 0 0) 0 30% / 22px 70% no-repeat, linear-gradient(#0b0d1a 0 0) 30px 10% / 30px 90% no-repeat, linear-gradient(#0b0d1a 0 0) 70px 45% / 18px 55% no-repeat, linear-gradient(#0b0d1a 0 0) 100px 0 / 40px 100% no-repeat, linear-gradient(#0b0d1a 0 0) 150px 35% / 26px 65% no-repeat, linear-gradient(#0b0d1a 0 0) 185px 15% / 34px 85% no-repeat, linear-gradient(#0b0d1a 0 0) 230px 50% / 20px 50% no-repeat, linear-gradient(#0b0d1a 0 0) 260px 5% / 44px 95% no-repeat, radial-gradient(#29d9ff 1px, transparent 1.5px) 0 0 / 8px 10px; }
.bnr-cyber::after { background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(41,217,255,.35) 14px 15px); animation: slideY .6s linear infinite; --to: 40px; }

/* Lava */
.bnr-lava { background: radial-gradient(circle at 30% 120%, #ff6d00, #b71c1c 40%, #1a0000 80%); background-size: 200% 200%; animation: lavaMove 6s ease-in-out infinite alternate; }
@keyframes lavaMove { to { background-position: 100% 0; } }
.bnr-lava::before { background: radial-gradient(circle, #ffab00 0 2px, transparent 3px) 0 0 / 40px 30px; animation: slideY 3s linear infinite; --to: -90px; opacity: .8; }

/* Bloquinhos de mundo aberto (grama/terra) com nuvens */
.bnr-craft { background: linear-gradient(#64b5f6, #bbdefb 60%, #66bb6a 60% 72%, #8d6e63 72%); image-rendering: pixelated; }
.bnr-craft::before { inset: auto 0 0; height: 40%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 12px, transparent 12px 24px), repeating-linear-gradient(rgba(0,0,0,.08) 0 12px, transparent 12px 24px); }
.bnr-craft::after { inset: 8px 0 auto; height: 22px; background: linear-gradient(#fff 0 0) 0 0 / 60px 12px no-repeat, linear-gradient(#fff 0 0) 12px 10px / 72px 12px no-repeat, linear-gradient(#fff 0 0) 200px 4px / 48px 10px no-repeat, linear-gradient(#fff 0 0) 210px 12px / 60px 10px no-repeat; animation: slideX 14s linear infinite; --to: -340px; background-repeat: repeat-x; background-size: 340px 12px, 340px 12px, 340px 10px, 340px 10px; }

/* Ninja: espiral laranja + folhas caindo */
.bnr-ninja { background: radial-gradient(circle at 80% 50%, #ffb74d, #ff6d00 45%, #6d2400); }
.bnr-ninja::before { left: 55%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, rgba(255,255,255,.25) 8px 10px); -webkit-mask: conic-gradient(#000 0 75%, transparent 0); mask: conic-gradient(#000 0 75%, transparent 0); animation: spin 6s linear infinite; }
.bnr-ninja::after { background: radial-gradient(ellipse 6px 3px at 20px 10px, #43a047 90%, transparent), radial-gradient(ellipse 5px 3px at 90px 30px, #66bb6a 90%, transparent), radial-gradient(ellipse 6px 3px at 160px 5px, #2e7d32 90%, transparent), radial-gradient(ellipse 5px 3px at 240px 40px, #66bb6a 90%, transparent); background-size: 300px 96px; animation: leaves 5s linear infinite; }
@keyframes leaves { to { background-position: 60px 96px; } }

/* Sakura: pétalas caindo */
.bnr-sakura { background: linear-gradient(135deg, #2a0a26, #6a1b4d 60%, #ff80ab); }
.bnr-sakura::before, .bnr-sakura::after { background: radial-gradient(ellipse 5px 3px at 10px 10px, #ffc1e3 90%, transparent), radial-gradient(ellipse 4px 3px at 70px 40px, #ff80ab 90%, transparent), radial-gradient(ellipse 5px 3px at 130px 20px, #fff0f6 90%, transparent), radial-gradient(ellipse 4px 3px at 200px 60px, #f48fb1 90%, transparent); background-size: 240px 100px; animation: petals 6s linear infinite; }
.bnr-sakura::after { animation-duration: 9s; animation-delay: -3s; opacity: .7; }
@keyframes petals { to { background-position: -80px 100px; } }

/* Lua vermelha com tomoe girando */
.bnr-tomoe { background: radial-gradient(circle at 78% 50%, #ff1744 0 30px, #8b0000 31px 34px, transparent 35px), linear-gradient(#120000, #2b0000); }
.bnr-tomoe::before { left: auto; width: 100%; background: radial-gradient(circle at calc(78% + 0px) calc(50% - 18px), #0b0d1a 0 5px, transparent 6px), radial-gradient(circle at calc(78% + 16px) calc(50% + 9px), #0b0d1a 0 5px, transparent 6px), radial-gradient(circle at calc(78% - 16px) calc(50% + 9px), #0b0d1a 0 5px, transparent 6px); transform-origin: 78% 50%; animation: spin 2.4s linear infinite; }
.bnr-tomoe::after { background: radial-gradient(circle at 78% 50%, rgba(255,23,68,.35), transparent 40%); animation: pulseGlow 2.4s ease-in-out infinite; }

/* Aura dourada de poder */
.bnr-ki { background: radial-gradient(ellipse at 50% 120%, #fff59d, #ffd600 30%, #ff6f00 60%, #3e1a00); }
.bnr-ki::before { background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.35) 12px 14px, transparent 14px 30px); -webkit-mask: linear-gradient(transparent, #000 40%, transparent); mask: linear-gradient(transparent, #000 40%, transparent); animation: slideY .5s linear infinite; --to: -60px; background-size: 100% 60px; }
.bnr-ki::after { background: radial-gradient(circle, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px) 0 0 / 34px 26px; animation: slideY 1.2s linear infinite; --to: -78px; }

/* Mecha: HUD hexagonal escaneando */
.bnr-mecha { background: linear-gradient(135deg, #0b1218, #1c2b36); }
.bnr-mecha::before { background: radial-gradient(circle at 50% 50%, transparent 7px, rgba(41,217,255,.25) 7.5px 8.5px, transparent 9px) 0 0 / 22px 19px, radial-gradient(circle at 50% 50%, transparent 7px, rgba(41,217,255,.25) 7.5px 8.5px, transparent 9px) 11px 9.5px / 22px 19px; }
.bnr-mecha::after { background: linear-gradient(90deg, transparent, rgba(61,220,151,.5) 48% 52%, transparent); width: 30%; animation: scan 2.2s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateX(-30%); } to { transform: translateX(330%); } }

/* Kawaii: corações e estrelas flutuando */
.bnr-kawaii { background: linear-gradient(135deg, #ffd6e8, #e3d4ff 50%, #c3f0ff); }
.bnr-kawaii::before { background: radial-gradient(circle at 30% 40%, #ff80ab 0 4px, transparent 5px) 0 0 / 70px 60px, radial-gradient(circle at 70% 40%, #ff80ab 0 4px, transparent 5px) 0 0 / 70px 60px, radial-gradient(circle, #fff 0 2px, transparent 3px) 30px 20px / 50px 44px; animation: slideY 5s linear infinite; --to: -120px; }

/* Círculo mágico girando */
.bnr-magic { background: radial-gradient(circle at 50% 50%, #4a148c, #12002b 70%); }
.bnr-magic::before { left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; background: repeating-conic-gradient(rgba(224,64,251,.75) 0 4deg, transparent 4deg 15deg); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67% 76%, #000 77% 79%, transparent 80%); mask: radial-gradient(circle, transparent 62%, #000 63% 66%, transparent 67% 76%, #000 77% 79%, transparent 80%); animation: spin 10s linear infinite; inset: auto; }
.bnr-magic::after { background: radial-gradient(circle, rgba(224,64,251,.35), transparent 50%); animation: pulseGlow 2.5s ease-in-out infinite; }

/* HQ: retícula + raios */
.bnr-comic { background: repeating-conic-gradient(from 0deg at 70% 50%, #ffeb3b 0 10deg, #ff9800 10deg 20deg); }
.bnr-comic::before { background: radial-gradient(#e53935 25%, transparent 27%) 0 0 / 10px 10px; -webkit-mask: linear-gradient(90deg, #000, transparent 60%); mask: linear-gradient(90deg, #000, transparent 60%); }
.bnr-comic::after { background: radial-gradient(circle at 70% 50%, #fff 0 18px, transparent 19px); animation: pop 1.6s ease-in-out infinite; }
@keyframes pop { 50% { transform: scale(1.15); } }

/* Oceano pirata: ondas */
.bnr-ocean { background: linear-gradient(#4fc3f7, #0288d1 60%, #01579b); }
.bnr-ocean::before { inset: auto 0 0; height: 45%; background: radial-gradient(circle at 20px 0, transparent 18px, #0277bd 19px) 0 0 / 40px 100% repeat-x; animation: slideX 3s linear infinite; --to: -40px; }
.bnr-ocean::after { inset: auto 0 0; height: 30%; background: radial-gradient(circle at 25px 0, transparent 22px, #01579b 23px) 0 0 / 50px 100% repeat-x; animation: slideX 2s linear infinite; --to: 50px; }

/* Noite na vila: lua + telhados */
.bnr-village { background: radial-gradient(circle at 80% 30%, #fffde7 0 16px, rgba(255,253,231,.15) 17px 30px, transparent 31px), linear-gradient(#0d1b4b, #1a237e 70%); }
.bnr-village::before { inset: auto 0 0; height: 50%; background: conic-gradient(from 135deg at 30px 0, #0b0d1a 0 90deg, transparent 0) 0 0 / 60px 100% repeat-x, linear-gradient(#0b0d1a 0 0) 0 60% / 100% 100% no-repeat; }
.bnr-village::after { background: radial-gradient(circle, #ffd54f 0 1.5px, transparent 2px) 14px 70px / 46px 30px; animation: pulseGlow 2s ease-in-out infinite; }

/* Galáxia */
.bnr-galaxy { background: radial-gradient(ellipse at 30% 50%, #7b5cff55, transparent 50%), radial-gradient(ellipse at 70% 60%, #ff3d9a55, transparent 45%), #05010f; background-size: 160% 160%; animation: lavaMove 10s ease-in-out infinite alternate; }
.bnr-galaxy::before { background: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 35%, #fff, transparent), radial-gradient(1px 1px at 30% 85%, #fff, transparent); background-size: 100px 80px; animation: pulseGlow 3s ease-in-out infinite; }

/* Kenfeh neon (marca) */
.bnr-kenfeh { background: linear-gradient(120deg, #ff3d9a, #b44dff 55%, #3d7bff); }
.bnr-kenfeh::before { background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; animation: slideX 4s linear infinite; --to: -44px; }
.bnr-kenfeh::after { background: linear-gradient(transparent 60%, rgba(6,7,13,.45)); }

/* quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) { .bnr::before, .bnr::after, .bnr { animation: none !important; } }

/* ---------- galerias nas configurações ---------- */
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.cos-grid.wide { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cos-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 6px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.cos-opt:hover { background: rgba(255,61,154,.08); }
.cos-opt.active { box-shadow: inset 0 0 0 2px var(--pink), 3px 3px 0 var(--cyan); background: rgba(255,61,154,.1); }
.cos-opt small { font-size: 11px; color: var(--text-2); text-align: center; line-height: 1.2; }
.cos-opt img { width: 54px; height: 54px; border-radius: 50%; }
.cos-opt .bnr-prev { width: 100%; height: 50px; border-radius: 8px; }
.cos-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.cos-tabs button { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-2); }
.cos-tabs button.active { background: rgba(255,61,154,.16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,61,154,.55); }

/* ---------- molduras com elementos voando em volta (corvos, folhas, shurikens…) ---------- */
.frame-crows::before { --frame-bg: conic-gradient(from var(--ang), #2b0000, #b71c1c, #2b0000, #6d0000, #2b0000); animation: ang 4s linear infinite; }
.frame-crows::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%2890%29%20scale%281.9%29%22%3E%3Cpath%20d%3D%22M-9%201c3-5%207-6%209-2%202-4%206-3%209%202-3-1-5%200-6%202l-3%204-3-4c-1-2-3-3-6-2z%22%20fill%3D%22%230b0d1a%22%20stroke%3D%22%23ff5252%22%20stroke-width%3D%22.9%22/%3E%3Ccircle%20cx%3D%221%22%20cy%3D%22-1%22%20r%3D%22.9%22%20fill%3D%22%23ff1744%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885.5%2070.5%29%20rotate%28210%29%20scale%281.9%29%22%3E%3Cpath%20d%3D%22M-9%201c3-5%207-6%209-2%202-4%206-3%209%202-3-1-5%200-6%202l-3%204-3-4c-1-2-3-3-6-2z%22%20fill%3D%22%230b0d1a%22%20stroke%3D%22%23ff5252%22%20stroke-width%3D%22.9%22/%3E%3Ccircle%20cx%3D%221%22%20cy%3D%22-1%22%20r%3D%22.9%22%20fill%3D%22%23ff1744%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2814.5%2070.5%29%20rotate%28330%29%20scale%281.9%29%22%3E%3Cpath%20d%3D%22M-9%201c3-5%207-6%209-2%202-4%206-3%209%202-3-1-5%200-6%202l-3%204-3-4c-1-2-3-3-6-2z%22%20fill%3D%22%230b0d1a%22%20stroke%3D%22%23ff5252%22%20stroke-width%3D%22.9%22/%3E%3Ccircle%20cx%3D%221%22%20cy%3D%22-1%22%20r%3D%22.9%22%20fill%3D%22%23ff1744%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 6s linear infinite; z-index: 2; }
.frame-leaves::before { --frame-bg: conic-gradient(from var(--ang), #1b5e20, #a5d6a7, #2e7d32, #c5e1a5, #1b5e20); animation: ang 4s linear infinite; }
.frame-leaves::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%2890%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M-7%200C-4-6%204-6%207%200%204%206-4%206-7%200z%22%20fill%3D%22%2366bb6a%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M-7%200h14%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885.5%2029.5%29%20rotate%28150%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M-7%200C-4-6%204-6%207%200%204%206-4%206-7%200z%22%20fill%3D%22%2366bb6a%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M-7%200h14%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885.5%2070.5%29%20rotate%28210%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M-7%200C-4-6%204-6%207%200%204%206-4%206-7%200z%22%20fill%3D%22%2366bb6a%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M-7%200h14%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2850.0%2091.0%29%20rotate%28270%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M-7%200C-4-6%204-6%207%200%204%206-4%206-7%200z%22%20fill%3D%22%2366bb6a%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M-7%200h14%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2814.5%2070.5%29%20rotate%28330%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M-7%200C-4-6%204-6%207%200%204%206-4%206-7%200z%22%20fill%3D%22%2366bb6a%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M-7%200h14%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2814.5%2029.5%29%20rotate%28390%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M-7%200C-4-6%204-6%207%200%204%206-4%206-7%200z%22%20fill%3D%22%2366bb6a%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M-7%200h14%22%20stroke%3D%22%231b5e20%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 8s linear infinite; z-index: 2; }
.frame-shuriken::before { --frame-bg: conic-gradient(from var(--ang), #263238, #90a4ae, #263238, #eceff1, #263238); animation: ang 4s linear infinite; }
.frame-shuriken::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%2890%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M0-7l1.8%205.2L7%200l-5.2%201.8L0%207l-1.8-5.2L-7%200l5.2-1.8z%22%20fill%3D%22%23eceff1%22%20stroke%3D%22%2337474f%22%20stroke-width%3D%22.8%22/%3E%3Ccircle%20r%3D%221.4%22%20fill%3D%22%23263238%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2891.0%2050.0%29%20rotate%28180%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M0-7l1.8%205.2L7%200l-5.2%201.8L0%207l-1.8-5.2L-7%200l5.2-1.8z%22%20fill%3D%22%23eceff1%22%20stroke%3D%22%2337474f%22%20stroke-width%3D%22.8%22/%3E%3Ccircle%20r%3D%221.4%22%20fill%3D%22%23263238%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2850.0%2091.0%29%20rotate%28270%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M0-7l1.8%205.2L7%200l-5.2%201.8L0%207l-1.8-5.2L-7%200l5.2-1.8z%22%20fill%3D%22%23eceff1%22%20stroke%3D%22%2337474f%22%20stroke-width%3D%22.8%22/%3E%3Ccircle%20r%3D%221.4%22%20fill%3D%22%23263238%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%289.0%2050.0%29%20rotate%28360%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M0-7l1.8%205.2L7%200l-5.2%201.8L0%207l-1.8-5.2L-7%200l5.2-1.8z%22%20fill%3D%22%23eceff1%22%20stroke%3D%22%2337474f%22%20stroke-width%3D%22.8%22/%3E%3Ccircle%20r%3D%221.4%22%20fill%3D%22%23263238%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 2.2s linear infinite; z-index: 2; }
.frame-bats::before { --frame-bg: conic-gradient(from var(--ang), #12002b, #6a1b9a, #12002b, #d500f9, #12002b); animation: ang 4s linear infinite; }
.frame-bats::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%2890%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M-9-1c2%200%203-2%204-3%200%202%201%203%202%203l3-2%203%202c1%200%202-1%202-3%201%201%202%203%204%203-2%201-3%203-3%205-1-1-3-2-5-1l-1%202-1-2c-2-1-4%200-5%201%200-2-1-4-3-5z%22%20fill%3D%22%232a0050%22%20stroke%3D%22%23e040fb%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2891.0%2050.0%29%20rotate%28180%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M-9-1c2%200%203-2%204-3%200%202%201%203%202%203l3-2%203%202c1%200%202-1%202-3%201%201%202%203%204%203-2%201-3%203-3%205-1-1-3-2-5-1l-1%202-1-2c-2-1-4%200-5%201%200-2-1-4-3-5z%22%20fill%3D%22%232a0050%22%20stroke%3D%22%23e040fb%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2850.0%2091.0%29%20rotate%28270%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M-9-1c2%200%203-2%204-3%200%202%201%203%202%203l3-2%203%202c1%200%202-1%202-3%201%201%202%203%204%203-2%201-3%203-3%205-1-1-3-2-5-1l-1%202-1-2c-2-1-4%200-5%201%200-2-1-4-3-5z%22%20fill%3D%22%232a0050%22%20stroke%3D%22%23e040fb%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%289.0%2050.0%29%20rotate%28360%29%20scale%281.6%29%22%3E%3Cpath%20d%3D%22M-9-1c2%200%203-2%204-3%200%202%201%203%202%203l3-2%203%202c1%200%202-1%202-3%201%201%202%203%204%203-2%201-3%203-3%205-1-1-3-2-5-1l-1%202-1-2c-2-1-4%200-5%201%200-2-1-4-3-5z%22%20fill%3D%22%232a0050%22%20stroke%3D%22%23e040fb%22%20stroke-width%3D%22.8%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 5s linear infinite; z-index: 2; }
.frame-butterflies::before { --frame-bg: conic-gradient(from var(--ang), #00b0ff, #e1f5fe, #7c4dff, #00e5ff, #00b0ff); animation: ang 4s linear infinite; }
.frame-butterflies::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%2890%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0%200C-3-7-10-6-8%200-10%206-3%207%200%200%203%207%2010%206%208%200%2010-6%203-7%200%200z%22%20fill%3D%22%2329d9ff%22%20stroke%3D%22%23e1f5fe%22%20stroke-width%3D%22.6%22/%3E%3Cpath%20d%3D%22M0-4v8%22%20stroke%3D%22%230b0d1a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2891.0%2050.0%29%20rotate%28180%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0%200C-3-7-10-6-8%200-10%206-3%207%200%200%203%207%2010%206%208%200%2010-6%203-7%200%200z%22%20fill%3D%22%2329d9ff%22%20stroke%3D%22%23e1f5fe%22%20stroke-width%3D%22.6%22/%3E%3Cpath%20d%3D%22M0-4v8%22%20stroke%3D%22%230b0d1a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2850.0%2091.0%29%20rotate%28270%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0%200C-3-7-10-6-8%200-10%206-3%207%200%200%203%207%2010%206%208%200%2010-6%203-7%200%200z%22%20fill%3D%22%2329d9ff%22%20stroke%3D%22%23e1f5fe%22%20stroke-width%3D%22.6%22/%3E%3Cpath%20d%3D%22M0-4v8%22%20stroke%3D%22%230b0d1a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%289.0%2050.0%29%20rotate%28360%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0%200C-3-7-10-6-8%200-10%206-3%207%200%200%203%207%2010%206%208%200%2010-6%203-7%200%200z%22%20fill%3D%22%2329d9ff%22%20stroke%3D%22%23e1f5fe%22%20stroke-width%3D%22.6%22/%3E%3Cpath%20d%3D%22M0-4v8%22%20stroke%3D%22%230b0d1a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 9s linear infinite; z-index: 2; }
.frame-orbs::before { --frame-bg: conic-gradient(from var(--ang), #ff6f00, #ffd54f, #ff8f00, #fff59d, #ff6f00); animation: ang 4s linear infinite; }
.frame-orbs::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2882.1%2024.4%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2890.0%2059.1%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2867.8%2086.9%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2832.2%2086.9%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2810.0%2059.1%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2817.9%2024.4%29%20rotate%280%29%20scale%281.2%29%22%3E%3Ccircle%20r%3D%226%22%20fill%3D%22%23ffb300%22%20stroke%3D%22%23e65100%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M0-2.8l.8%201.7%201.9.3-1.4%201.3.3%201.9L0%201.5l-1.6.9.3-1.9-1.4-1.3%201.9-.3z%22%20fill%3D%22%23d50000%22/%3E%3Ccircle%20cx%3D%22-2.2%22%20cy%3D%22-2.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.75%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 10s linear infinite; z-index: 2; }
.frame-stars8::before { --frame-bg: repeating-conic-gradient(from var(--ang), #ff3d9a 0 30deg, #29d9ff 30deg 60deg); animation: ang 4s linear infinite; }
.frame-stars8::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%280%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M-1.5-6h3v4.5h4.5v3h-4.5V6h-3V1.5H-6v-3h4.5z%22%20fill%3D%22%23ffe600%22%20stroke%3D%22%23ff3d9a%22%20stroke-width%3D%22.7%22%20shape-rendering%3D%22crispEdges%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885.5%2029.5%29%20rotate%280%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M-1.5-6h3v4.5h4.5v3h-4.5V6h-3V1.5H-6v-3h4.5z%22%20fill%3D%22%23ffe600%22%20stroke%3D%22%23ff3d9a%22%20stroke-width%3D%22.7%22%20shape-rendering%3D%22crispEdges%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2885.5%2070.5%29%20rotate%280%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M-1.5-6h3v4.5h4.5v3h-4.5V6h-3V1.5H-6v-3h4.5z%22%20fill%3D%22%23ffe600%22%20stroke%3D%22%23ff3d9a%22%20stroke-width%3D%22.7%22%20shape-rendering%3D%22crispEdges%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2850.0%2091.0%29%20rotate%280%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M-1.5-6h3v4.5h4.5v3h-4.5V6h-3V1.5H-6v-3h4.5z%22%20fill%3D%22%23ffe600%22%20stroke%3D%22%23ff3d9a%22%20stroke-width%3D%22.7%22%20shape-rendering%3D%22crispEdges%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2814.5%2070.5%29%20rotate%280%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M-1.5-6h3v4.5h4.5v3h-4.5V6h-3V1.5H-6v-3h4.5z%22%20fill%3D%22%23ffe600%22%20stroke%3D%22%23ff3d9a%22%20stroke-width%3D%22.7%22%20shape-rendering%3D%22crispEdges%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2814.5%2029.5%29%20rotate%280%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M-1.5-6h3v4.5h4.5v3h-4.5V6h-3V1.5H-6v-3h4.5z%22%20fill%3D%22%23ffe600%22%20stroke%3D%22%23ff3d9a%22%20stroke-width%3D%22.7%22%20shape-rendering%3D%22crispEdges%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 6s linear infinite; z-index: 2; }
.frame-flames::before { --frame-bg: conic-gradient(from var(--ang), #ff3d00, #ffb300, #ff6d00, #ff1744, #ffd600, #ff3d00); animation: ang 4s linear infinite; }
.frame-flames::after { inset: calc(var(--fw) * -3.6); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20transform%3D%22translate%2850.0%209.0%29%20rotate%2890%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2879.0%2021.0%29%20rotate%28135%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2891.0%2050.0%29%20rotate%28180%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2879.0%2079.0%29%20rotate%28225%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2850.0%2091.0%29%20rotate%28270%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2821.0%2079.0%29%20rotate%28315%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%289.0%2050.0%29%20rotate%28360%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2821.0%2021.0%29%20rotate%28405%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-8c4%204%205%207%202%2010%201-2%200-4-1-5%200%204-4%204-4%207-2-4-1-7%203-12z%22%20fill%3D%22%23ff6d00%22%20stroke%3D%22%23ffd54f%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: spin 3s linear infinite; z-index: 2; }
.frame-pinwheel::before { --frame-bg: conic-gradient(from var(--ang), #0b0d1a 0 22deg, #d50000 40deg 98deg, #0b0d1a 120deg 142deg, #d50000 160deg 218deg, #0b0d1a 240deg 262deg, #d50000 280deg 338deg, #0b0d1a 360deg); animation: ang 1.2s linear infinite; }
.frame-pinwheel::after { inset: calc(var(--fw) * -.4); border: 1.5px solid #0b0d1a; box-shadow: 0 0 14px rgba(213,0,0,.75); }
.bnr-matrix::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2256%22%3E%3Ctext%20x%3D%224%22%20y%3D%2212%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E1%3C/text%3E%3Ctext%20x%3D%224%22%20y%3D%2226%22%20fill%3D%22%2300c832%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E0%3C/text%3E%3Ctext%20x%3D%224%22%20y%3D%2240%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E7%3C/text%3E%3Ctext%20x%3D%2220%22%20y%3D%226%22%20fill%3D%22%23b9ffb9%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E%E3%82%A2%3C/text%3E%3Ctext%20x%3D%2220%22%20y%3D%2220%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E0%3C/text%3E%3Ctext%20x%3D%2220%22%20y%3D%2234%22%20fill%3D%22%2300c832%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E1%3C/text%3E%3Ctext%20x%3D%2220%22%20y%3D%2248%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E%E3%82%AB%3C/text%3E%3Ctext%20x%3D%2236%22%20y%3D%2216%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E9%3C/text%3E%3Ctext%20x%3D%2236%22%20y%3D%2230%22%20fill%3D%22%2300c832%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E1%3C/text%3E%3Ctext%20x%3D%2252%22%20y%3D%228%22%20fill%3D%22%23b9ffb9%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E0%3C/text%3E%3Ctext%20x%3D%2252%22%20y%3D%2222%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E%E3%82%B7%3C/text%3E%3Ctext%20x%3D%2252%22%20y%3D%2236%22%20fill%3D%22%2300c832%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E1%3C/text%3E%3Ctext%20x%3D%2252%22%20y%3D%2250%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E0%3C/text%3E%3Ctext%20x%3D%2268%22%20y%3D%2214%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E1%3C/text%3E%3Ctext%20x%3D%2268%22%20y%3D%2228%22%20fill%3D%22%2300c832%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E%E3%82%B1%3C/text%3E%3Ctext%20x%3D%2284%22%20y%3D%224%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E0%3C/text%3E%3Ctext%20x%3D%2284%22%20y%3D%2218%22%20fill%3D%22%23b9ffb9%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E1%3C/text%3E%3Ctext%20x%3D%2284%22%20y%3D%2232%22%20fill%3D%22%2300c832%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E5%3C/text%3E%3Ctext%20x%3D%2284%22%20y%3D%2246%22%20fill%3D%22%2300ff41%22%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20font-weight%3D%22700%22%3E%E3%82%BD%3C/text%3E%3C/svg%3E") 0 0 / 96px 56px; animation: slideY 2s linear infinite; --to: 56px; }
.bnr-zone::before { background: radial-gradient(circle at 50% 60%, transparent 0 34%, rgba(124,77,255,.6) 36%, rgba(98,0,234,.8)); animation: zonePulse 4s ease-in-out infinite; }
@keyframes zonePulse { 50% { transform: scale(.82); } }
.bnr-magic::before { inset: auto; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; }
.bnr-space { background: radial-gradient(ellipse at 50% 50%, #2a2370, #05030f 70%); }
.bnr-space::before { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 60% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent), radial-gradient(2.5px 2.5px at 40% 80%, #b3e5fc, transparent), radial-gradient(1.5px 1.5px at 90% 60%, #fff, transparent), radial-gradient(2px 2px at 10% 75%, #ffccf0, transparent); background-size: 90px 70px; }
.bnr-rpg::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20100V60l30-30%2025%2025%2035-40%2040%2045%2030-20%2040%2035%2035-45%2035%2040%2030-15v45z%22%20fill%3D%22%23071209%22/%3E%3C/svg%3E") bottom / 100% 70% no-repeat; }
.bnr-rpg::before { background: radial-gradient(circle, #ffd54f 0 2px, transparent 3.5px) 0 0 / 46px 36px, radial-gradient(circle, #b2ff59 0 1.5px, transparent 3px) 23px 18px / 58px 48px; }
.bnr-magic::before { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.bnr-zone::before { inset: -40%; }
/* recorte de imagem */
.crop-modal { width: min(620px, 100%); }
.crop { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crop > p { align-self: stretch; margin: 0; }
.crop-stage { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); touch-action: none; }
.crop-canvas { display: block; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-zoom-row { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); color: var(--text-2); font-weight: 800; }
/* decoração que passa do limite da foto */
.av-deco { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; pointer-events: none; z-index: 3; max-width: none; user-select: none; }
.av:has(.av-deco) { overflow: visible; isolation: isolate; }
.av-deco.back { z-index: -1; }
.deco-opt { padding-top: 16px; padding-bottom: 8px; }
.deco-opt .av { margin: 4px 0; }
/* efeito por cima do cartão de perfil */
.profile-card { overflow: hidden; }
.pc-fx { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 4; }
.fx-prev { width: 100%; height: 56px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; color: var(--text-3); background: linear-gradient(135deg, #1a1446, #3a0a4e); }
.fx-prev img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .pc-fx { display: none; } }

/* =========================================================
   TEMAS COMPLETOS DE PERFIL (kit de temas: cores e fontes de cada um)
   ========================================================= */
.bnr-rubro { background: #0d0809 url("/img/theme/rubro-banner.svg") right center / cover no-repeat; }
.bnr-t-raposa { background: #08080b url("/img/theme/raposa-banner.svg") center / cover no-repeat; }
.bnr-t-corvo { background: #08080b url("/img/theme/corvo-banner.svg") center / cover no-repeat; }
.bnr-t-sakura { background: #08080b url("/img/theme/sakura-banner.svg") center / cover no-repeat; }
.bnr-t-gamer { background: #08080b url("/img/theme/gamer-banner.svg") center / cover no-repeat; }
.bnr-t-fenix { background: #08080b url("/img/theme/fenix-banner.svg") center / cover no-repeat; }
.bnr-t-lobo { background: #08080b url("/img/theme/lobo-banner.svg") center / cover no-repeat; }
.bnr-t-arcano { background: #08080b url("/img/theme/arcano-banner.svg") center / cover no-repeat; }
.bnr-t-cyber { background: #08080b url("/img/theme/cyber-banner.svg") center / cover no-repeat; }
.bnr-t-galaxia { background: #08080b url("/img/theme/galaxia-banner.svg") center / cover no-repeat; }
.bnr-t-caveira { background: #08080b url("/img/theme/caveira-banner.svg") center / cover no-repeat; }
.pt-rubro { --dg-bg: #0e0b0c; --dg-surface: #1a1416; --dg-surface-2: #241b1e; --dg-border: #3a1a20; --dg-iron: #3a3a40; --dg-iron-light: #8a8a92; --dg-accent: #d0142a; --dg-hot: #ff2a3d; --dg-deep: #5a0410; --dg-ember: #ffb020; --dg-text: #f2e9e6; --dg-muted: #b3a3a6; --dg-font-display: "Cinzel", Georgia, serif; --dg-font-body: "Alegreya Sans", system-ui, sans-serif; --dg-display-size: 1; }
.pt-raposa { --dg-bg: #090c16; --dg-surface: #111728; --dg-surface-2: #182036; --dg-border: #24345e; --dg-iron: #3a4466; --dg-iron-light: #d8e4ff; --dg-accent: #2f7bff; --dg-hot: #7cf3ff; --dg-deep: #1a2a6b; --dg-ember: #c9a4ff; --dg-text: #eef3ff; --dg-muted: #a7b3d1; --dg-font-display: "Shippori Mincho", Georgia, serif; }
.pt-corvo { --dg-bg: #0a090f; --dg-surface: #13111d; --dg-surface-2: #1b182a; --dg-border: #322a52; --dg-iron: #2a2638; --dg-iron-light: #8a84a0; --dg-accent: #7a3cff; --dg-hot: #b07bff; --dg-deep: #2a0f5a; --dg-ember: #ffc94a; --dg-text: #efeaff; --dg-muted: #aaa2c4; --dg-font-display: "Cinzel", Georgia, serif; }
.pt-sakura { --dg-bg: #0d0a0e; --dg-surface: #18121a; --dg-surface-2: #221a24; --dg-border: #4a2a3c; --dg-iron: #4a5260; --dg-iron-light: #e8eef8; --dg-accent: #e0367f; --dg-hot: #ff8cc0; --dg-deep: #5a0f33; --dg-ember: #e8eef8; --dg-text: #fff0f6; --dg-muted: #c4a9b6; --dg-font-display: "Shippori Mincho", Georgia, serif; }
.pt-gamer { --dg-bg: #06080b; --dg-surface: #0f1419; --dg-surface-2: #151c23; --dg-border: #1f3a30; --dg-iron: #1b2230; --dg-iron-light: #3a4a5a; --dg-accent: #12b866; --dg-hot: #2bff88; --dg-deep: #0a4a2a; --dg-ember: #ff3df0; --dg-text: #e8fff2; --dg-muted: #9ab8a8; --dg-font-display: "Press Start 2P", monospace; --dg-display-size: .62; }
.pt-fenix { --dg-bg: #110904; --dg-surface: #1c1009; --dg-surface-2: #26170d; --dg-border: #5a2a10; --dg-iron: #6a3a12; --dg-iron-light: #ffe6a8; --dg-accent: #e8500e; --dg-hot: #ffb21f; --dg-deep: #5a1000; --dg-ember: #fff2a0; --dg-text: #fff4e6; --dg-muted: #d2b49a; --dg-font-display: "Cinzel", Georgia, serif; }
.pt-lobo { --dg-bg: #080b12; --dg-surface: #10151f; --dg-surface-2: #171e2b; --dg-border: #2a3a55; --dg-iron: #3a4560; --dg-iron-light: #e6eefb; --dg-accent: #3a85cc; --dg-hot: #8fe3ff; --dg-deep: #16233f; --dg-ember: #e6eefb; --dg-text: #eef4ff; --dg-muted: #a3b2c9; --dg-font-display: "Uncial Antiqua", Georgia, serif; --dg-display-size: .9; }
.pt-arcano { --dg-bg: #070a12; --dg-surface: #0e1220; --dg-surface-2: #141a2c; --dg-border: #2a3a5a; --dg-iron: #2a1f4a; --dg-iron-light: #c9a4ff; --dg-accent: #0f9e85; --dg-hot: #2ef2d0; --dg-deep: #2a145a; --dg-ember: #c9a4ff; --dg-text: #eafffb; --dg-muted: #a0b8c4; --dg-font-display: "Uncial Antiqua", Georgia, serif; --dg-display-size: .9; }
.pt-cyber { --dg-bg: #05060b; --dg-surface: #0c0e18; --dg-surface-2: #121524; --dg-border: #23304a; --dg-iron: #151a26; --dg-iron-light: #3a4258; --dg-accent: #009aa8; --dg-hot: #00f0ff; --dg-deep: #3a0a40; --dg-ember: #ff2bd6; --dg-text: #e8fbff; --dg-muted: #93a7bd; --dg-font-display: "Orbitron", sans-serif; --dg-display-size: .8; }
.pt-galaxia { --dg-bg: #07061a; --dg-surface: #100e28; --dg-surface-2: #171436; --dg-border: #2e2a66; --dg-iron: #2a1f5a; --dg-iron-light: #ffe6a8; --dg-accent: #4f5ff0; --dg-hot: #a9b4ff; --dg-deep: #1a0e40; --dg-ember: #ffcf5a; --dg-text: #f0f0ff; --dg-muted: #a8a6d0; --dg-font-display: "Audiowide", sans-serif; --dg-display-size: .85; }
.pt-caveira { --dg-bg: #070a05; --dg-surface: #0f140b; --dg-surface-2: #161d10; --dg-border: #2f4a1a; --dg-iron: #3a3a2a; --dg-iron-light: #f2f0e0; --dg-accent: #2f9a00; --dg-hot: #7dff3a; --dg-deep: #0f2a05; --dg-ember: #eaff9a; --dg-text: #f0ffe6; --dg-muted: #a6b896; --dg-font-display: "Creepster", cursive; --dg-display-size: 1.1; }
.pt { --dg-font-body: "Alegreya Sans", "Outfit", system-ui, sans-serif; --dg-display-size: 1; }
.pt-gamer { --dg-display-size: .62; } .pt-lobo, .pt-arcano { --dg-display-size: .9; } .pt-cyber { --dg-display-size: .8; } .pt-galaxia { --dg-display-size: .85; } .pt-caveira { --dg-display-size: 1.1; }
.profile-card.pt { background: var(--dg-surface); color: var(--dg-text); font-family: var(--dg-font-body);
  box-shadow: 0 0 0 1px var(--dg-border), 0 0 26px color-mix(in srgb, var(--dg-accent) 28%, transparent); animation: ptGlow 3.2s ease-in-out infinite; }
@keyframes ptGlow { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dg-hot) 55%, var(--dg-border)), 0 0 36px color-mix(in srgb, var(--dg-accent) 45%, transparent); } }
.pt .pc-banner { height: 128px; }
.pt .pc-head { margin-top: -50px; align-items: flex-end; gap: 10px; padding: 0 14px 0 30px; }
.pt .pc-av { background: var(--dg-surface); }
.pt .pc-presence { box-shadow: 0 0 0 4px var(--dg-surface); }
.pt-badges { margin-left: auto; margin-bottom: 4px; display: flex; gap: 3px; padding: 4px 6px; border-radius: 9px; background: var(--dg-surface-2); border: 1px solid var(--dg-border); position: relative; z-index: 3; }
.pt-badges img { width: 24px; height: 24px; display: block; transition: transform .15s; }
.pt-badges img:hover { transform: translateY(-2px) scale(1.14); }
.pt .pc-body { margin: 6px 12px 12px; padding: 12px 14px 14px; border-radius: 10px; background: var(--dg-surface-2); }
.pt-nameplate { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; padding: 6px 16px 6px 12px; margin-bottom: 2px; color: #fff;
  font: 800 calc(19px * var(--dg-display-size)) / 1.25 var(--dg-font-display, Georgia), Georgia, serif; letter-spacing: .03em;
  background: linear-gradient(100deg, var(--dg-iron) 0%, #0e0e10 45%, var(--dg-deep) 100%); border: 1px solid var(--dg-iron-light); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px color-mix(in srgb, var(--dg-hot) 35%, transparent); text-shadow: 0 0 8px var(--dg-hot);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); max-width: 100%; }
.pt-nameplate span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-gem { width: 9px; height: 9px; flex: none; transform: rotate(45deg); background: var(--dg-hot); box-shadow: 0 0 8px var(--dg-hot); animation: ptGem 1.8s ease-in-out infinite; }
@keyframes ptGem { 50% { box-shadow: 0 0 15px var(--dg-hot); transform: rotate(45deg) scale(1.18); } }
.pt .pc-user { color: var(--dg-muted); }
.pt .pc-section h5 { color: var(--dg-muted); letter-spacing: .06em; }
.pt .pc-section p, .pt .pc-status { color: var(--dg-text); }
.pt .chip { background: var(--dg-bg); box-shadow: inset 0 0 0 1px var(--dg-border); color: var(--dg-text); border-radius: 4px; }
.pt .pc-activity { background: linear-gradient(135deg, color-mix(in srgb, var(--dg-accent) 22%, transparent), color-mix(in srgb, var(--dg-deep) 40%, transparent)); box-shadow: inset 0 0 0 1px var(--dg-border); }
.pt .btn-primary { background: linear-gradient(180deg, var(--dg-accent), var(--dg-deep)); box-shadow: 0 0 0 1px var(--dg-hot) inset, 0 0 14px color-mix(in srgb, var(--dg-hot) 45%, transparent); color: #fff; }
.pt .btn-ghost { background: transparent; color: var(--dg-text); box-shadow: inset 0 0 0 1px var(--dg-border); }
.pt-cyber.profile-card, .pt-cyber .pt-nameplate, .pt-cyber .pc-body { border-radius: 0; }
.pt-gamer .btn { border-radius: 0; font-family: "Press Start 2P", monospace; font-size: 10px; }
.pt-oni { --dg-bg: #0c0505; --dg-surface: #170a0a; --dg-surface-2: #211010; --dg-border: #4a1a14; --dg-iron: #2a2a2a; --dg-iron-light: #ffc23d; --dg-accent: #d01a1a; --dg-hot: #ffc23d; --dg-deep: #3a0505; --dg-ember: #ff5a42; --dg-text: #fff0e6; --dg-muted: #c8a8a0; --dg-font-display: "Shippori Mincho", Georgia, serif; --dg-display-size: 1; }
.pt-serpente { --dg-bg: #050c08; --dg-surface: #0b1710; --dg-surface-2: #112018; --dg-border: #1f4a30; --dg-iron: #3a2a05; --dg-iron-light: #fff0b0; --dg-accent: #14a85e; --dg-hot: #7dffb8; --dg-deep: #05401f; --dg-ember: #ffc23d; --dg-text: #eafff2; --dg-muted: #9ec0aa; --dg-font-display: "Cinzel", Georgia, serif; --dg-display-size: 1; }
.pt-kraken { --dg-bg: #050a16; --dg-surface: #0a1426; --dg-surface-2: #0f1c34; --dg-border: #1f3a66; --dg-iron: #2a5a9a; --dg-iron-light: #8fd0ff; --dg-accent: #1e6fd0; --dg-hot: #5ab8ff; --dg-deep: #0a1a4a; --dg-ember: #ff7a5a; --dg-text: #eaf6ff; --dg-muted: #9ab4cc; --dg-font-display: "Pirata One", Georgia, serif; --dg-display-size: 1.1; }
.pt-neko { --dg-bg: #fff5fa; --dg-surface: #ffffff; --dg-surface-2: #fff0f7; --dg-border: #f2cfe3; --dg-iron: #ffd0e8; --dg-iron-light: #b9a4ff; --dg-accent: #ff6fb5; --dg-hot: #ff9ecf; --dg-deep: #b9a4ff; --dg-ember: #8a5cff; --dg-text: #4a2a5a; --dg-muted: #8a6a9a; --dg-font-display: "Fredoka", system-ui, sans-serif; --dg-display-size: 1; }
.pt-pirata { --dg-bg: #070b14; --dg-surface: #0f1622; --dg-surface-2: #16202e; --dg-border: #3a3020; --dg-iron: #8a5a1a; --dg-iron-light: #ffe6a8; --dg-accent: #c8862a; --dg-hot: #ffd27a; --dg-deep: #0a1a3a; --dg-ember: #e8d4a8; --dg-text: #fff6e0; --dg-muted: #c4b498; --dg-font-display: "Pirata One", Georgia, serif; --dg-display-size: 1.15; }
.pt-tempestade { --dg-bg: #07081a; --dg-surface: #0f1128; --dg-surface-2: #151838; --dg-border: #2a2f6a; --dg-iron: #4a4f9f; --dg-iron-light: #d8dcff; --dg-accent: #4a4fbf; --dg-hot: #ffe14a; --dg-deep: #14163a; --dg-ember: #9aa0d8; --dg-text: #f0f2ff; --dg-muted: #a6aad4; --dg-font-display: "Russo One", sans-serif; --dg-display-size: .9; }
.pt-vampiro { --dg-bg: #0b0408; --dg-surface: #150910; --dg-surface-2: #1e0e17; --dg-border: #4a1a30; --dg-iron: #4a3a4a; --dg-iron-light: #c8c0d0; --dg-accent: #a0123a; --dg-hot: #ff4a6a; --dg-deep: #2a0414; --dg-ember: #c8c0d0; --dg-text: #fbeef4; --dg-muted: #bfa2b0; --dg-font-display: "UnifrakturMaguntia", Georgia, serif; --dg-display-size: 1.1; }
.pt-cavaleiro { --dg-bg: #070a18; --dg-surface: #0e1428; --dg-surface-2: #141c36; --dg-border: #2a3a7a; --dg-iron: #8a5a00; --dg-iron-light: #fff0a8; --dg-accent: #2a4bd0; --dg-hot: #f5c542; --dg-deep: #101a6a; --dg-ember: #ffffff; --dg-text: #f0f4ff; --dg-muted: #a8b2d4; --dg-font-display: "Cinzel Decorative", Georgia, serif; --dg-display-size: .85; }
.pt-slime { --dg-bg: #0c0816; --dg-surface: #150f24; --dg-surface-2: #1d1530; --dg-border: #3a2a66; --dg-iron: #a86bff; --dg-iron-light: #e8d8ff; --dg-accent: #8a4dff; --dg-hot: #c8a4ff; --dg-deep: #3a1a7a; --dg-ember: #ffc23d; --dg-text: #f6f0ff; --dg-muted: #b4a6d4; --dg-font-display: "Fredoka", system-ui, sans-serif; --dg-display-size: 1; }
.pt-floresta { --dg-bg: #050c08; --dg-surface: #0b1610; --dg-surface-2: #111f17; --dg-border: #1f4a30; --dg-iron: #2a6a2a; --dg-iron-light: #8fdc8a; --dg-accent: #1aa87a; --dg-hot: #5affc8; --dg-deep: #0a2a1a; --dg-ember: #ffd27a; --dg-text: #ecfff4; --dg-muted: #9fc4ae; --dg-font-display: "Kaushan Script", cursive; --dg-display-size: 1; }
.pt-tricolor { --dg-bg: #08080a; --dg-surface: #141416; --dg-surface-2: #1c1c20; --dg-border: #3a1a1e; --dg-iron: #111111; --dg-iron-light: #f2c14e; --dg-accent: #e3061b; --dg-hot: #ff2a3a; --dg-deep: #5a0008; --dg-ember: #f2c14e; --dg-text: #ffffff; --dg-muted: #c9b9bb; --dg-font-display: "Russo One", Impact, sans-serif; --dg-display-size: 1; }
.bnr-t-oni { background: #08080b url("/img/theme/oni-banner.svg") center / cover no-repeat; }
.bnr-t-serpente { background: #08080b url("/img/theme/serpente-banner.svg") center / cover no-repeat; }
.bnr-t-kraken { background: #08080b url("/img/theme/kraken-banner.svg") center / cover no-repeat; }
.bnr-t-neko { background: #08080b url("/img/theme/neko-banner.svg") center / cover no-repeat; }
.bnr-t-pirata { background: #08080b url("/img/theme/pirata-banner.svg") center / cover no-repeat; }
.bnr-t-tempestade { background: #08080b url("/img/theme/tempestade-banner.svg") center / cover no-repeat; }
.bnr-t-vampiro { background: #08080b url("/img/theme/vampiro-banner.svg") center / cover no-repeat; }
.bnr-t-cavaleiro { background: #08080b url("/img/theme/cavaleiro-banner.svg") center / cover no-repeat; }
.bnr-t-slime { background: #08080b url("/img/theme/slime-banner.svg") center / cover no-repeat; }
.bnr-t-floresta { background: #08080b url("/img/theme/floresta-banner.svg") center / cover no-repeat; }
.bnr-t-tricolor { background: #08080b url("/img/theme/tricolor-banner.svg") center / cover no-repeat; }
.pt-oni, .pt-serpente, .pt-neko, .pt-cavaleiro, .pt-slime, .pt-floresta, .pt-tricolor { --dg-display-size: 1; }
.pt-kraken, .pt-vampiro { --dg-display-size: 1.1; } .pt-pirata { --dg-display-size: 1.15; } .pt-tempestade { --dg-display-size: .9; } .pt-cavaleiro { --dg-display-size: .85; }
.pt-neko .pt-nameplate { color: #4a2a5a; text-shadow: 0 0 8px #fff; background: linear-gradient(100deg, #fff 0%, #ffd0e8 55%, #d8c8ff 100%); }
.pt-slime.profile-card, .pt-neko.profile-card, .pt-slime .pc-body, .pt-neko .pc-body { border-radius: 18px; }
/* Tricolor Soberano (exclusivo do dono): borda tricolor girando, nameplate listrada com brilho, selo e títulos */
.profile-card.pt-tricolor { border: 2px solid transparent; background: linear-gradient(var(--dg-surface), var(--dg-surface)) padding-box, linear-gradient(90deg, #e3061b, #fff, #0a0a0a, #e3061b) border-box; background-size: 100% 100%, 300% 100%; animation: triBorder 5s linear infinite, ptGlow 3.2s ease-in-out infinite; }
@keyframes triBorder { to { background-position: 0 0, 300% 0; } }
.pt-tricolor .pt-nameplate { position: relative; overflow: hidden; border-color: #f2c14e; text-shadow: 0 2px 0 #000, 0 0 10px #e3061b;
  background: linear-gradient(90deg, #e3061b 0 16.6%, #fff 16.6% 33.3%, #0a0a0a 33.3% 50%, #e3061b 50% 66.6%, #fff 66.6% 83.3%, #0a0a0a 83.3%) 0 100% / 200% 5px no-repeat, linear-gradient(100deg, #2a2a2e 0%, #050505 55%, #5a0008 100%);
  animation: triShift 4s linear infinite; }
.pt-tricolor .pt-nameplate::after { content: ''; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: triShine 3s ease-in-out infinite; }
@keyframes triShift { to { background-position: 200% 100%, 0 0; } }
@keyframes triShine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
.pt-tricolor .pt-gem { background: #f2c14e; box-shadow: 0 0 10px #f2c14e; }
.pt-owner { align-self: flex-start; margin: 2px 0 4px; padding: 3px 10px; border-radius: 4px; font: 800 11px/1.4 var(--dg-font-body); letter-spacing: .1em; text-transform: uppercase; color: #111;
  background: linear-gradient(90deg, #fff6c8, #f2c14e, #b8862a, #fff6c8) 0 0 / 300% 100%; animation: triShift 3s linear infinite; box-shadow: 0 0 12px rgba(242,193,78,.5); }
.pt-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; display: grid; gap: 6px; }
.pt-timeline::before { content: ''; position: absolute; left: 5px; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: linear-gradient(#e3061b 0 33%, #fff 33% 66%, #0a0a0a 66%); }
.pt-timeline li { position: relative; display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.pt-timeline li::before { content: '★'; position: absolute; left: -21px; color: #f2c14e; text-shadow: 0 0 8px #f2c14e; animation: ptGem 2s ease-in-out infinite; }
.pt-timeline b { font: 400 15px/1.1 var(--dg-font-display); color: #f2c14e; min-width: 78px; }
@media (prefers-reduced-motion: reduce) { .profile-card.pt-tricolor, .pt-tricolor .pt-nameplate, .pt-tricolor .pt-nameplate::after, .pt-owner { animation: none; } }

/* moldura do kit é um pouco maior (162%) */
.av-deco.kit { left: -31%; top: -31%; width: 162%; height: 162%; }

/* prévias na galeria de temas */
.theme-opt .theme-prev { position: relative; width: 100%; height: 74px; border-radius: 10px; }
.theme-prev.none { display: grid; place-items: center; background: var(--bg-3, #1a1d2e); color: var(--text-3); }
.theme-prev > .bnr { position: absolute; inset: 0; border-radius: 10px; }
.theme-prev > .av { position: absolute; left: 14px; bottom: 10px; }
.theme-prev.pt { box-shadow: 0 0 0 1px var(--dg-border), 0 0 12px color-mix(in srgb, var(--dg-accent) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .profile-card.pt, .pt-gem { animation: none; } }

/* seções recolhíveis do editor de perfil */
.cos-secs { display: flex; flex-direction: column; gap: 8px; }
.cos-sec { border-radius: 12px; background: var(--bg-2, rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px var(--line-2, rgba(255,255,255,.08)); }
.cos-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; font-weight: 700; user-select: none; }
.cos-sec > summary::-webkit-details-marker { display: none; }
.cos-sec > summary::after { content: '▾'; margin-left: auto; color: var(--text-3); transition: transform .15s; }
.cos-sec[open] > summary::after { transform: rotate(180deg); }
.cos-sec > summary small { font-weight: 500; }
.cos-sec > div { padding: 0 12px 12px; }
.cos-grid { content-visibility: auto; contain-intrinsic-size: auto 300px; }