/* PREVIAS-SKINS 12/10: cena animada das skins de personagem (tools/gerar_previas_skins_1210.py).
   A vitrine parada fica no cartão; ao passar o mouse/tocar, a cena (pixel x2, tamanho natural, nunca esticada) a cobre. */
.skin-quadro { position: relative; cursor: pointer; }
.skin-quadro:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.skin-quadro .skin-anim,
.prod-preview.skin-quadro img.skin-anim { display: none; width: auto; height: auto; max-width: none; object-fit: none; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; }
.skin-quadro.animando .skin-anim,
.prod-preview.skin-quadro.animando img.skin-anim { display: block; }
.skin-quadro.animando .vit-canvas,
.skin-quadro.animando .pv-arte { display: none; }
.skin-quadro.animando .anim-dica { display: none; }
.skin-anim-ficha { display: block; width: auto; height: auto; margin: 8px auto 0; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; }
.selo-universal { display: inline-block; margin: 4px 0; color: #10220a; background: #ffd25e; border-color: #ffe7a3; }
.prod-como-skin { margin: 6px 0; font-size: 14px; line-height: 1.45; }
.prod-como-skin summary { cursor: pointer; font-weight: 800; color: var(--amarelo-2, #ffc247); min-height: 48px; display: flex; align-items: center; }
.prod-como-skin p { margin: 4px 0 0; color: var(--texto-2, #c2d8ec); overflow-wrap: anywhere; }
.skin-partes { font-size: 14px; color: var(--texto-2, #c2d8ec); }
@media (prefers-reduced-motion: reduce) { .skin-anim-ficha { display: none; } }
.loja-item-arte:has(.skin-anim-ficha) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 10px; }
.loja-item-arte img.skin-anim-ficha { max-width: none; max-height: none; width: auto; height: auto; margin: 0; }