/* /js/jogos/cenas-jogos.css — cards animados nos outros jogos (mockup aprovado em 05/10/2026: docs/mockups/jogos/cards-animados-jogos.html).
   Moldura dos blocos: faixa no topo nas cores do jogo, cortes diagonais e o cenário animado ao fundo (js/jogos/cenas-jogos.js).
   As cores de cada jogo vêm em --jg-c1/--jg-c2/--jg-c3 na página. Parado em prefers-reduced-motion. Sem texto novo (letra 15px fica como está). */
.jg-pagina .jg-bl{position:relative;overflow:hidden;border:1px solid var(--border,#29313d);border-radius:14px;padding:16px;margin-block:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--jg-c3) 85%,transparent),var(--card,#0f131c) 70%);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.jg-pagina .jg-bl::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--jg-c1),var(--jg-c2),var(--jg-c1));z-index:2;pointer-events:none}
.jg-pagina .jg-bl>*:not(.jg-cena):not(.jg-cortes){position:relative;z-index:1}
.jg-pagina .lol-section.jg-bl{border-top:1px solid var(--border,#29313d);padding-top:16px}
.jg-pagina .lol-header.jg-bl{border-bottom:1px solid var(--border,#29313d);padding-bottom:16px}
.jg-cena{position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:0}
.jg-cena svg{width:100%;height:100%}
.jg-cortes{position:absolute;right:0;top:0;width:120px;height:100%;pointer-events:none;z-index:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.035) 22px 30px)}
/* movimentos de cada jogo (os mesmos do mockup) */
.jg-cena .gira{animation:jg-gira 18s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes jg-gira{to{transform:rotate(360deg)}}
.jg-cena .sobe{animation:jg-sobe 6s linear infinite}
.jg-cena .sobe:nth-child(2n){animation-duration:8s;animation-delay:-3s}.jg-cena .sobe:nth-child(3n){animation-duration:7s;animation-delay:-5s}
@keyframes jg-sobe{0%{transform:translateY(40px);opacity:0}20%{opacity:.9}100%{transform:translateY(-200px);opacity:0}}
.jg-cena .fumaca{animation:jg-fumaca 12s ease-in-out infinite}
.jg-cena .fumaca:nth-child(2){animation-delay:-4s}.jg-cena .fumaca:nth-child(3){animation-delay:-8s}
@keyframes jg-fumaca{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(-60px);opacity:.7}}
.jg-cena .desce{animation:jg-desce 9s ease-in-out infinite}
@keyframes jg-desce{0%{transform:translateY(-120px)}70%,100%{transform:translateY(40px)}}
.jg-cena .balanca{animation:jg-balanca 3s ease-in-out infinite;transform-origin:50% 0;transform-box:fill-box}
@keyframes jg-balanca{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.jg-cena .flutua{animation:jg-flutua 6s ease-in-out infinite}
.jg-cena .flutua:nth-child(2n){animation-delay:-2s}.jg-cena .flutua:nth-child(3n){animation-delay:-4s}
@keyframes jg-flutua{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-14px);opacity:1}}
.jg-cena .rastro{animation:jg-rastro 3.5s linear infinite}
.jg-cena .rastro:nth-child(2){animation-delay:-1.2s}.jg-cena .rastro:nth-child(3){animation-delay:-2.4s}
@keyframes jg-rastro{0%{transform:translateX(220px);opacity:0}15%{opacity:1}100%{transform:translateX(-900px);opacity:0}}
.jg-cena .pisca{animation:jg-pisca 4s ease-in-out infinite}
@keyframes jg-pisca{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.jg-cena .gira,.jg-cena .sobe,.jg-cena .fumaca,.jg-cena .desce,.jg-cena .balanca,.jg-cena .flutua,.jg-cena .rastro,.jg-cena .pisca{animation:none}}