/* /js/jogos/perfil-visual.css -- Dota 2, CS2 e PUBG no visual do Naruto (14/10/2026). As peças de layout são as do Genshin
   (/js/jogos/genshin/genshin-visual.css, classes gs-*); aqui só o que é de cada jogo: cores, fundo dos blocos, arte da faixa e o
   movimento do cenário (regra 11). O feixe de luz vem de /artes/feixe-onda.css (regra 20). Letra mínima 15px (regra 18). */
#dota2App.gs-app,#cs2App.gs-app,#pubgApp.gs-app{display:block}

/* cores e fundo de cada jogo */
#dota2App.gs-app{--gs-ouro:#e0b04a;--gs-ceu:#e5533d;--gs-borda:#4a2a2c}
#cs2App.gs-app{--gs-ouro:#f0c040;--gs-ceu:#7fb2e5;--gs-borda:#33425a}
#pubgApp.gs-app{--gs-ouro:#f6d27a;--gs-ceu:#9bd54a;--gs-borda:#38482f}
#dota2App .gs-bl{background:radial-gradient(ellipse at 85% 0%,rgba(229,83,61,.18),transparent 60%),linear-gradient(170deg,#261619,var(--s-850,#0f131c) 70%)}
#cs2App .gs-bl{background:radial-gradient(ellipse at 85% 0%,rgba(127,178,229,.16),transparent 60%),linear-gradient(170deg,#152030,var(--s-850,#0f131c) 70%)}
#pubgApp .gs-bl{background:radial-gradient(ellipse at 85% 0%,rgba(155,213,74,.14),transparent 60%),linear-gradient(170deg,#18241a,var(--s-850,#0f131c) 70%)}

/* blocos de resultado (o lugar do antigo .lol-section) */
.pj-bloco{padding:18px 20px;margin-bottom:16px}
.pj-nota{font-size:15px;margin-top:6px}
.gs-faixa .lol-error{margin:0}

/* arte da faixa */
#dota2App .gs-faixa-arte{background:radial-gradient(circle at 50% 120%,rgba(229,83,61,.4),transparent 65%),linear-gradient(180deg,#2a1a1d,#120a0c)}
#cs2App .gs-faixa-arte{background:linear-gradient(180deg,#16202e,#0c121a)}
#pubgApp .gs-faixa-arte{background:linear-gradient(180deg,#243a52,#10202e)}
.pj-herois{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:#120a0c}
.pj-herois img{width:100%;height:100%;object-fit:cover;display:block;position:static;filter:none;opacity:1}
.pj-herois img:nth-child(n){position:static;width:100%;left:auto;right:auto;z-index:auto;opacity:1}
.pj-cena{position:absolute;inset:0;width:100%;height:100%;display:block}

/* movimento do cenário (desligado em prefers-reduced-motion) */
.pj-fumaca{animation:pj-deriva 9s ease-in-out infinite alternate}
.pj-fumaca:nth-of-type(2){animation-delay:-4s}
.pj-nuvem{animation:pj-deriva 14s ease-in-out infinite alternate}
.pj-nuvem:nth-of-type(2){animation-delay:-6s}
.pj-para{animation:pj-balanca 5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
@keyframes pj-deriva{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes pj-balanca{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.pj-fumaca,.pj-nuvem,.pj-para{animation:none}}