/* css/lendarios-vivos.css - copiado do jogo por tools/atualizar-dados.js. Não editar à mão. */
/* css/lendarios-vivos.css (05/11/2026): os 4 Lendários com arte nova e "vivos" (mock aprovado: tools/mock-lendarios-novos.html).
   A carta (components.js, LEND_VIVO/lendHTML) ganha uma camada interna .lcena com o fundo (<id>-fundo.webp, já com a moldura dourada),
   a sombra e o personagem (.alma = <id>-alma.webp, recortado com borda preta em pixel art). Só a .lcena inclina com o mouse,
   para não brigar com os movimentos da própria carta (hover, arrastar).
   Por cima do personagem, as 4 camadas do holográfico dos Secretos em dourado, recortadas pela máscara <id>-holo.png
   (só as partes claras dele, borda em fade) e aparecendo/sumindo devagar. O mouse vem do fx.js (secHoloMouse: --hx, --hy, --hd).
   Vira-lata e 7 Vidas flutuam; Musa do Bar e O Peão estão sentados (cadeira e toco): respiram a partir da base. */
.jk.lendvivo.lendvivo.lendvivo.lendvivo.lendvivo{background-image:none!important;background-color:transparent!important;box-shadow:none!important;border-color:transparent!important;isolation:isolate}
.jk.lendvivo.lendvivo.lendvivo.lendvivo.lendvivo::before{content:none!important}
.jk.lendvivo.lendvivo.lendvivo.lendvivo .jkn{display:none!important}
.jk.lendvivo>.lcena{position:absolute;inset:0;z-index:0;pointer-events:none;
  transform:perspective(900px) rotateX(calc(var(--hy,0) * -12deg)) rotateY(calc(var(--hx,0) * 16deg))}
.jk.lendvivo>.lcena>.lfundo{position:absolute;inset:0;background:center/100% 100% no-repeat}
.jk.lendvivo.jk-nick>.lcena>.lfundo{background-image:url(../img/trunfos/nick-fundo.webp)}
.jk.lendvivo.jk-felix>.lcena>.lfundo{background-image:url(../img/trunfos/felix-fundo.webp)}
.jk.lendvivo.jk-pens>.lcena>.lfundo{background-image:url(../img/trunfos/pens-fundo.webp)}
.jk.lendvivo.jk-design>.lcena>.lfundo{background-image:url(../img/trunfos/design-fundo.webp)}
/* o personagem: lugar dentro da carta e o tamanho do arquivo (proporção) */
.jk.lendvivo .alma{position:absolute;isolation:isolate;filter:drop-shadow(0 6px 3px rgba(0,0,0,.45));
  translate:calc(var(--hx,0) * 10px) calc(var(--hy,0) * 8px);animation:lvFlutua 5.2s ease-in-out infinite}
.jk.lendvivo.jk-nick .alma{left:6%;top:33%;width:88%;aspect-ratio:249/266;--alma:url(../img/trunfos/nick-alma.webp);--holo:url(../img/trunfos/nick-holo.png)}
.jk.lendvivo.jk-felix .alma{left:4%;top:27%;width:92%;aspect-ratio:232/256;--alma:url(../img/trunfos/felix-alma.webp);--holo:url(../img/trunfos/felix-holo.png)}
.jk.lendvivo.jk-pens .alma{left:15%;top:6%;width:70%;aspect-ratio:205/366;--alma:url(../img/trunfos/pens-alma.webp);--holo:url(../img/trunfos/pens-holo.png)}
.jk.lendvivo.jk-design .alma{left:15%;top:6%;width:70%;aspect-ratio:207/366;--alma:url(../img/trunfos/design-alma.webp);--holo:url(../img/trunfos/design-holo.png)}
@keyframes lvFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.2%)}}
.jk.lendvivo.jk-pens .alma,.jk.lendvivo.jk-design .alma{animation:lvRespira 4.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes lvRespira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.006,1.016)}}
.jk.lendvivo .alma>.aimg{position:absolute;inset:0;background:var(--alma) center/contain no-repeat;image-rendering:pixelated}
/* sombra embaixo de quem flutua (os sentados não têm) */
.jk.lendvivo .lsombra{position:absolute;left:24%;width:52%;bottom:11%;height:4.5%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.5),transparent 70%);animation:lvSombra 5.2s ease-in-out infinite}
@keyframes lvSombra{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(.85);opacity:.6}}
.jk.lendvivo.jk-pens .lsombra,.jk.lendvivo.jk-design .lsombra{display:none}
/* holográfico dourado: só nas partes claras do personagem (máscara), suave e em fade */
.jk.lendvivo .alma>.lh{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:var(--holo) center/contain no-repeat;mask:var(--holo) center/contain no-repeat}
.jk.lendvivo .alma>.lhf{mix-blend-mode:overlay;animation:lvFade 7s ease-in-out infinite}
.jk.lendvivo .alma>.lht{mix-blend-mode:screen;animation:lvFadeT 7s ease-in-out infinite}
@keyframes lvFade{0%,100%{opacity:0}50%{opacity:.5}}
@keyframes lvFadeT{0%,100%{opacity:0}50%{opacity:.22}}
.jk.lendvivo .alma>.lhf::before{content:"";position:absolute;left:-100%;top:-100%;width:300%;height:300%;
  background:repeating-linear-gradient(90deg,#b8860b 0,#ffd23f 6%,#fff3b0 12%,#fff 18%,#e0a526 24%,#b8860b 30%);translate:calc(var(--hx,0) * 20%) 0;animation:lvAnda 6s linear infinite}
@keyframes lvAnda{from{transform:rotate(-31deg) translateX(0)}to{transform:rotate(-31deg) translateX(-30%)}}
.jk.lendvivo .alma>.lhl,.jk.lendvivo .alma>.lhm{mix-blend-mode:screen}
.jk.lendvivo .alma>.lhl::before,.jk.lendvivo .alma>.lhm::before{content:"";position:absolute;width:110%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,200,.7),rgba(255,226,140,.18) 45%,rgba(255,226,140,0) 70%)}
.jk.lendvivo .alma>.lhl{opacity:calc(1 - var(--hd,0))}.jk.lendvivo .alma>.lhl::before{opacity:.45;animation:lvVaiX 4.5s ease-in-out infinite alternate,lvVaiY 6.3s ease-in-out infinite alternate}
/* desempenho (08/11/2026, celular): o brilho passeava por left/top (o navegador refazia o layout da página a cada quadro). Agora anda por translate (X) e
   transform (Y), com as mesmas distâncias (100% da caixa: cqw/cqh da .lhl) e os mesmos tempos; o centro que era translate:-50% -50% virou margem
   (a bola tem 110% da largura da caixa: metade = 55% da largura). No celular também parte de 0/0: a animação antiga passava por cima do 35%/30% do mobile-leve.css, então o caminho na tela é o mesmo */
.jk.lendvivo .alma>.lhl{container-type:size}
.jk.lendvivo .alma>.lhl::before{left:0;top:0;translate:none;margin:-55% 0 0 -55%}
html.touch .jk.lendvivo .alma>.lhl::before{left:0!important;top:0!important}
@keyframes lvVaiX{from{translate:0 0}to{translate:100cqw 0}}@keyframes lvVaiY{from{transform:translateY(0)}to{transform:translateY(100cqh)}}
.jk.lendvivo .alma>.lhm{opacity:var(--hd,0)}.jk.lendvivo .alma>.lhm::before{opacity:.6;left:calc((var(--hx,0) + .5) * 100%);top:calc((var(--hy,0) + .5) * 100%)}
/* escondido (a carta saindo da fila etc.) e quem prefere menos movimento */
.jk.lendvivo.jkhide>.lcena{display:none}
@media(prefers-reduced-motion:reduce){.jk.lendvivo .alma,.jk.lendvivo .lsombra,.jk.lendvivo .alma>.lh,.jk.lendvivo .alma>.lh::before{animation:none!important}}