:root{
  --ac:#e0102f; --ac2:#ff3350; --glow:rgba(224,16,47,.55);
  --verde:#3be38a; --verm:#ff3350; --ouro:#ffb52e; --fogo:#ff5a1f;
  --vidro1:rgba(22,10,13,.96); --vidro2:rgba(9,6,8,.9);
  --mut:#a0909a;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:transparent;overflow:hidden;font-family:'Teko',sans-serif;color:#f1ecec}
body.preview{background:radial-gradient(900px 420px at 30% 40%,#2b2a24,#0f0e0c 70%)}

/* cada peça fica no canto, com folga para a sombra; no OBS você posiciona a fonte */
#palco{position:absolute;left:24px;top:24px;display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.peca{filter:drop-shadow(0 14px 28px rgba(0,0,0,.65))}

/* ======================= PLACAR ======================= */
.placar-card{position:relative;width:440px;padding:14px 26px 14px;overflow:hidden;
  background:linear-gradient(100deg,var(--vidro1),var(--vidro2));
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.placar-card::before{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.32;
  background:radial-gradient(30% 25% at 30% 60%,rgba(255,255,255,.10),transparent 70%),
             radial-gradient(25% 20% at 70% 30%,rgba(255,255,255,.07),transparent 70%);
  animation:nevoa 14s ease-in-out infinite alternate}
.placar-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--verm) 30%,var(--verde) 70%,transparent)}
.placar-card > *{position:relative}
.subt{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:4px;color:var(--mut)}
.placar{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6px}
.st{text-align:center;min-width:110px}
.st .n{display:inline-block;font-size:64px;font-weight:700;line-height:.82;font-variant-numeric:tabular-nums}
.st .l{display:block;font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--mut);margin-top:6px}
.st.w .n{color:var(--verde);text-shadow:0 0 16px rgba(59,227,138,.45)}
.st.d .n{color:var(--verm);text-shadow:0 0 16px rgba(255,51,80,.5)}
.st.r .n{color:#fff;font-size:44px}
.sep-v{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)}
.barra{position:relative;height:4px;margin-top:12px;background:rgba(255,51,80,.75)}
.barra i{position:absolute;left:0;top:0;bottom:0;background:var(--verde);
  box-shadow:0 0 8px var(--verde);transition:width .7s cubic-bezier(.2,.8,.2,1)}

/* ======================= STREAK + RECORDE ======================= */
.streak-card{display:flex;align-items:stretch;height:160px}
.streak-card.vazio{display:none}

.foto-wrap{position:relative;width:160px;flex:none;z-index:2}
.aura{position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 65%);filter:blur(8px);
  animation:pulsar 2.4s ease-in-out infinite;z-index:-1}
.foto-wrap::before{content:"";position:absolute;inset:-3px;
  background:linear-gradient(160deg,var(--ac2),var(--ac) 45%,#120507);
  clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%)}
.foto{position:absolute;inset:0;background:#120c0e center 15%/cover no-repeat;
  clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%)}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.85))}
.foto.sem-foto{display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;
  font-weight:900;font-size:58px;color:var(--ac2);background:radial-gradient(circle at 50% 40%,#2a0f14,#0b0608 75%)}
.tag-role{position:absolute;left:0;bottom:10px;z-index:2;font-family:'Cinzel',serif;font-size:11px;
  font-weight:700;letter-spacing:3px;color:#fff;background:var(--ac);padding:3px 14px 2px 10px;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}

.st-corpo{position:relative;margin-left:-8px;padding:14px 36px 12px 28px;min-width:380px;overflow:hidden;
  background:linear-gradient(110deg,rgba(26,10,8,.97),rgba(12,7,7,.92));
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
  display:flex;flex-direction:column;justify-content:space-between}
.st-corpo::before{content:"";position:absolute;right:-10%;bottom:-55%;width:80%;height:110%;pointer-events:none;
  background:radial-gradient(50% 55% at 50% 100%,rgba(255,110,30,.42),transparent 70%);
  animation:chama 1.4s ease-in-out infinite alternate}
.st-corpo::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--ac2),var(--ouro) 60%,transparent)}
.st-corpo > *{position:relative}
.st-corpo .subt{color:var(--ouro)}
.nome{font-family:'Cinzel',serif;font-weight:900;font-size:30px;line-height:1.05;text-transform:uppercase;
  letter-spacing:1px;max-width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 0 #000,0 0 20px var(--glow)}
.st-linha{display:flex;align-items:flex-end;gap:22px}
.bloco .rot{display:flex;align-items:center;gap:5px;font-family:'Cinzel',serif;font-size:10px;
  font-weight:700;letter-spacing:3px;color:var(--mut)}
.bloco .rot svg{width:14px;height:14px}
.bloco.fogo .rot svg{color:var(--fogo)}
.bloco.trofeu .rot svg{color:var(--ouro)}
.st-num{display:inline-block;font-size:76px;font-weight:700;line-height:.82;color:var(--ouro);
  font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(255,140,30,.9),0 0 36px rgba(255,90,31,.6)}
.rec-num{display:inline-block;font-size:52px;font-weight:700;line-height:.82;color:#fff;font-variant-numeric:tabular-nums}
.bloco .un{font-size:18px;color:#cdbfae;margin-left:4px;letter-spacing:1px}
.marcas{display:flex;gap:4px;padding-bottom:6px;flex-wrap:wrap;max-width:150px;margin-left:auto}
.marcas span{width:9px;height:13px;background:var(--ouro);clip-path:polygon(50% 0,100% 100%,0 100%);
  box-shadow:0 0 6px var(--fogo)}
.frio .st-num{color:#6f6468;text-shadow:none}
.frio .bloco.fogo .rot svg{color:#6f6468}
.frio .st-corpo::before{opacity:.12}
.rec-num.brilha{animation:brilha 1.8s ease 2}

/* ======================= FAIXA CENTRAL ======================= */
#faixa{position:fixed;left:0;right:0;top:40%;height:150px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;opacity:0;text-align:center}
#faixa .big{font-family:'Cinzel',serif;font-weight:900;font-size:80px;letter-spacing:16px;line-height:1;color:#fff}
#faixa .sub{font-size:28px;letter-spacing:4px;color:rgba(255,255,255,.85);margin-top:6px}
#faixa.v{background:linear-gradient(90deg,transparent,rgba(16,95,52,.88) 25%,rgba(16,95,52,.88) 75%,transparent)}
#faixa.v .big{text-shadow:0 0 28px var(--verde)}
#faixa.d{background:linear-gradient(90deg,transparent,rgba(125,0,20,.9) 25%,rgba(125,0,20,.9) 75%,transparent)}
#faixa.d .big{text-shadow:0 0 28px var(--verm)}
#faixa.rec{background:linear-gradient(90deg,transparent,rgba(120,70,0,.9) 25%,rgba(120,70,0,.9) 75%,transparent)}
#faixa.rec .big{color:#ffe2a0;text-shadow:0 0 30px var(--ouro),0 0 60px var(--fogo)}
#faixa.anima{animation:faixa 3s ease forwards}

/* ======================= EFEITOS ======================= */
.flutua{position:absolute;font-size:36px;font-weight:700;pointer-events:none;z-index:9;animation:sobe 1.1s ease-out forwards}
.fagulha{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--ouro);z-index:9;
  box-shadow:0 0 8px var(--fogo);pointer-events:none;animation:fagulha 1.5s ease-out forwards}
.pop{animation:pop .55s cubic-bezier(.2,1.6,.4,1)}
.tremer{animation:tremer .45s}
.troca .foto,.troca .nome{animation:entra .6s cubic-bezier(.2,1.2,.3,1)}

@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(-4deg)}100%{transform:scale(1)}}
@keyframes pulsar{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}
@keyframes nevoa{from{transform:translate(-6%,2%)}to{transform:translate(8%,-4%)}}
@keyframes chama{from{transform:scaleY(.9);opacity:.75}to{transform:scaleY(1.1);opacity:1}}
@keyframes sobe{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-55px)}}
@keyframes fagulha{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes tremer{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes brilha{50%{color:var(--ouro);text-shadow:0 0 18px var(--ouro)}}
@keyframes entra{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes faixa{0%{opacity:0;transform:scaleY(0)}12%{opacity:1;transform:scaleY(1)}82%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.6)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ======================= HISTÓRICO NO PLACAR ======================= */
.hist-ov{display:flex;gap:4px;margin-top:12px}
.hist-ov span{flex:1;max-width:38px;height:24px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;line-height:1;padding-top:3px;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.hist-ov .v{background:rgba(59,227,138,.18);color:var(--verde)}
.hist-ov .d{background:rgba(255,51,80,.18);color:var(--verm)}
.hist-ov .ult{box-shadow:inset 0 0 0 2px currentColor}

/* ======================= META E MÉDIA NA STREAK ======================= */
.st-corpo .subt{display:flex;gap:8px;white-space:nowrap}
.st-corpo .subt .media{color:var(--mut);letter-spacing:2px}
.meta-txt{display:none;margin-left:auto;padding-bottom:4px;font-size:44px;font-weight:700;line-height:.8;color:#fff;text-align:right;white-space:nowrap}
.meta-txt small{display:block;font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--mut);margin-bottom:6px}
.meta-txt i{font-style:normal;color:var(--mut);font-size:28px}
.meta-barra{display:none;position:absolute;left:0;right:22px;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.meta-barra i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--fogo),var(--ouro));box-shadow:0 0 10px var(--fogo);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.com-meta .meta-txt,.com-meta .meta-barra{display:block}
.meta-ok .meta-txt{color:var(--ouro);text-shadow:0 0 16px rgba(255,140,30,.8)}
.comemora{animation:comemora 1.2s ease}
@keyframes comemora{20%{transform:scale(1.05)}40%{transform:scale(.98)}60%{transform:scale(1.03)}}

/* ======================= FILA DE RESGATE: barra fina =======================
   total | killer da vez (fixo, destacado) | próximos 3 com a posição (trocam a cada 6 s) | +N */
.rb{position:relative;display:flex;align-items:stretch;height:48px;
  background:linear-gradient(100deg,var(--vidro1),var(--vidro2));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.rb::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ouro),rgba(255,181,46,.25) 45%,transparent)}
.rb.vazio{display:none}
.rb-tot{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:66px;padding:0 12px 0 14px;background:rgba(0,0,0,.35)}
.rb-tot b{font-size:30px;font-weight:700;line-height:.8;padding-top:5px;color:var(--ouro);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,140,30,.5)}
.rb-tot small{font-family:'Cinzel',serif;font-size:8px;font-weight:700;letter-spacing:2px;color:var(--mut);margin-top:3px;white-space:nowrap}
.rb-vez{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding-right:16px;max-width:300px;
  background:linear-gradient(90deg,rgba(255,181,46,.16),rgba(255,181,46,.04))}
.rb-foto{flex:none;width:40px;height:48px;background:#120c0e center 15%/cover no-repeat;box-shadow:inset 0 0 0 2px var(--ouro)}
.rb-foto.sem-foto,.rb-mini.sem-foto{display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:14px;color:var(--ac2);background:#1a0b0e}
.rb-vt{min-width:0}
.rb-sub{display:flex;gap:5px;font-family:'Cinzel',serif;font-size:8px;font-weight:700;letter-spacing:2.5px;color:var(--ouro);white-space:nowrap}
.rb-quem{color:var(--mut);letter-spacing:.5px;text-transform:none;font-family:'Teko',sans-serif;font-size:14px;line-height:8px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.rb-linha{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.rb-nome{font-family:'Cinzel',serif;font-weight:900;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-shadow:0 2px 0 #000}
.rb-n{flex:none;font-size:26px;font-weight:700;line-height:.8;color:#fff;font-variant-numeric:tabular-nums}
.rb-n i{font-style:normal;color:var(--mut);font-size:18px}
.rb-prog{position:absolute;left:40px;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.rb-prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--fogo),var(--ouro));box-shadow:0 0 8px var(--fogo);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.rb.ok .rb-n,.rb.ok .rb-n i{color:var(--verde);text-shadow:0 0 14px rgba(59,227,138,.6)}
.rb.ok .rb-prog i{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.rb-prox{display:flex;align-items:center}
.rb-prox.resg-vira{animation:resgVira .45s ease}
.rb-it{display:flex;align-items:center;gap:7px;height:100%;padding:0 12px;border-left:1px solid rgba(255,255,255,.08)}
.rb-pos{font-size:17px;font-weight:600;line-height:1;padding-top:3px;color:var(--mut)}
.rb-mini{flex:none;width:26px;height:32px;background:#120c0e center 15%/cover no-repeat;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
.rb-it b{font-family:'Cinzel',serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.rb-in{font-size:20px;font-weight:600;line-height:1;padding-top:3px;font-variant-numeric:tabular-nums}
.rb-in i{font-style:normal;color:var(--mut);font-size:15px}
.rb-mais{flex:none;align-self:center;padding:3px 14px 0 10px;font-size:22px;font-weight:600;line-height:1;color:var(--ouro)}
.rb-mais:empty{display:none}
/* estilo compacto (padrão): pílulas soltas, sem o fundo da barra */
.rbc{display:none}
.rb.compacta{background:none;clip-path:none;height:auto}
.rb.compacta::after,.rb.compacta>:not(.rbc){display:none}
.rb.compacta .rbc{display:flex;align-items:center;gap:8px}
.rbc-p{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 4px;white-space:nowrap;
  background:rgba(12,8,10,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.rbc-p.vez{background:linear-gradient(90deg,rgba(255,181,46,.2),rgba(12,8,10,.78) 70%);box-shadow:inset 0 0 0 1px rgba(255,181,46,.35)}
.rbc-f{flex:none;width:26px;height:26px;border-radius:50%;background:#120c0e center 15%/cover no-repeat;box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}
.rbc-p.vez .rbc-f{box-shadow:0 0 0 2px var(--ouro),0 0 10px rgba(255,140,30,.55)}
.rbc-f.sem-foto{display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:11px;color:var(--ac2);background:#1a0b0e}
.rbc-p b{font-family:'Cinzel',serif;font-weight:700;font-size:13px;letter-spacing:.3px;max-width:150px;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.rbc-pos{font-size:16px;font-weight:600;line-height:1;padding-top:3px;margin-left:5px;color:var(--mut)}
.rbc-n{font-size:20px;font-weight:700;line-height:1;padding-top:3px;font-variant-numeric:tabular-nums}
.rbc-n i{font-style:normal;color:var(--mut);font-size:15px}
.rbc-p.vez .rbc-n{color:#fff}
.rbc-bar{position:absolute;left:34px;bottom:0;height:2px;background:linear-gradient(90deg,var(--fogo),var(--ouro));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.rb.ok .rbc-p.vez .rbc-n,.rb.ok .rbc-p.vez .rbc-n i{color:var(--verde)}
.rb.ok .rbc-p.vez .rbc-bar{background:var(--verde)}
.rbc-tot{flex-direction:column;justify-content:center;gap:0;padding:0 12px}
.rbc-tot b{font-family:'Teko',sans-serif;font-size:22px;font-weight:700;line-height:.8;padding-top:4px;color:var(--ouro);max-width:none;text-shadow:0 0 10px rgba(255,140,30,.45)}
.rbc-tot small{font-family:'Cinzel',serif;font-size:7px;font-weight:700;letter-spacing:1.5px;color:var(--mut);margin-top:1px}
.rbc.resg-vira{animation:resgVira .45s ease}@keyframes resgVira{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* ======================= ROLETA ======================= */
#roleta{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 0;
  background:linear-gradient(90deg,transparent,rgba(8,4,6,.92) 15%,rgba(8,4,6,.92) 85%,transparent)}
#roleta.entra{animation:rolEntra .5s ease}
#roleta.sai{animation:rolSai .6s ease forwards}
.rol-titulo{font-family:'Cinzel',serif;font-weight:900;font-size:44px;letter-spacing:10px;color:#fff;text-shadow:0 0 24px rgba(255,51,80,.6)}
#roleta.fim .rol-titulo{color:var(--ouro);text-shadow:0 0 30px var(--ouro),0 0 60px var(--fogo);animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.rol-janela{position:relative;width:1180px;max-width:100vw;height:250px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.rol-fita{position:absolute;left:0;top:10px;display:flex;gap:16px;will-change:transform}
.rol-card{position:relative;flex:none;width:176px;height:230px;overflow:hidden;background:#120c0e;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);box-shadow:inset 0 0 0 2px rgba(255,51,80,.6)}
.rol-card .foto{position:absolute;inset:0;clip-path:none}
.rol-card .foto::after{background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.92))}
.rol-card span{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;font-family:'Cinzel',serif;font-weight:900;font-size:17px;letter-spacing:1px;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rol-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,51,80,.55)}
.rol-card.venceu{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.rol-card.venceu::after{box-shadow:inset 0 0 0 5px var(--ouro),inset 0 0 40px rgba(255,181,46,.45)}
.rol-card.venceu span{color:var(--ouro)}
.rol-mira{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--ouro);box-shadow:0 0 16px var(--ouro);z-index:3}
.rol-mira::before,.rol-mira::after{content:"";position:absolute;left:50%;width:0;height:0;border:12px solid transparent;margin-left:-12px}
.rol-mira::before{top:0;border-top-color:var(--ouro)}
.rol-mira::after{bottom:0;border-bottom-color:var(--ouro)}
@keyframes rolEntra{from{opacity:0;transform:translateY(-50%) scaleY(.6)}}
@keyframes rolSai{to{opacity:0;transform:translateY(-50%) scaleY(.7)}}

/* ======================= POSIÇÕES LIVRES (overlay.html) ======================= */
#palco.livre{left:0;top:0;width:1920px;height:1080px;display:block}
#palco.livre .peca{position:absolute;transform-origin:0 0;width:max-content}

/* ======================= RESGATES E PIX: cartão que vira (tabela de resgates / QR do LivePix) ======================= */
.px{width:300px;perspective:1400px}
.px.vazio{display:none}
.px-in{display:grid;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.45,.05,.25,1)}
.px.virado .px-in{transform:rotateY(180deg)}
.px-f{grid-area:1/1;position:relative;padding:16px 18px 18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(100deg,var(--vidro1),var(--vidro2));
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.px-f::before{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.25;
  background:radial-gradient(30% 25% at 30% 60%,rgba(255,255,255,.10),transparent 70%),radial-gradient(25% 20% at 70% 30%,rgba(255,255,255,.07),transparent 70%);
  animation:nevoa 14s ease-in-out infinite alternate}
.px-f::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--ac2),var(--ouro) 55%,transparent)}
.px-f > *{position:relative}
.px-b{transform:rotateY(180deg)}
.px-b:empty{display:none}
.px-tit{font-family:'Cinzel',serif;font-weight:900;font-size:22px;letter-spacing:5px;color:#fff;text-shadow:0 2px 0 #000,0 0 18px var(--glow);
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.px-l{list-style:none;display:flex;flex-direction:column}
.px-l li{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.px-l li:last-child{border-bottom:0}
.px-v{flex:none;min-width:58px;font-size:30px;font-weight:700;line-height:.8;padding-top:4px;color:var(--ouro);font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(255,140,30,.55)}
.px-v small{font-size:16px;margin-right:2px;color:#e8c27a}
.px-d{font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:#f1ecec;line-height:1.15}
/* lado do QR sem fundo: só o quadro branco do QR, o link e a frase (com sombra para ler em cima do jogo) */
.px-b,.px-a.so-pix{background:none}
.px-b::before,.px-b::after,.px-a.so-pix::before,.px-a.so-pix::after{display:none}
.px-qr{width:170px;margin:6px auto 10px;padding:6px;background:#fff;box-shadow:0 0 0 2px var(--ouro),0 8px 22px rgba(0,0,0,.5)}
.px-qr svg,.px-qr img{display:block;width:100%;height:auto}
.px-link{text-align:center;font-size:24px;font-weight:600;letter-spacing:.5px;line-height:1;color:#fff;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.9),0 0 3px #000}
.px-fr{text-align:center;margin-top:6px;font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#e9dfe2;text-shadow:0 1px 0 #000,0 0 8px rgba(0,0,0,.95),0 0 2px #000}
@media (prefers-reduced-motion:reduce){.px-in{transition:opacity .3s}}