/* Barra do Blocão: a barra de experiência do jogo, cheia na proporção seguidores / 300.763. */
.xpb{--xp:#80ff20;--xp2:#4faa12;--xp3:#1d4d06;display:block;position:relative;padding-top:21px;width:100%;text-decoration:none;color:inherit;font-family:var(--f-mc);font-size:16px;line-height:1}
.xpb[hidden]{display:none}
.xpb .xpn{position:absolute;top:0;left:50%;transform:translateX(-50%);color:var(--xp);font-family:var(--f-mc);font-size:16px;letter-spacing:0;white-space:nowrap;
  text-shadow:2px 0 0 #142e03,-2px 0 0 #142e03,0 2px 0 #142e03,0 -2px 0 #142e03,2px 2px 0 #142e03,-2px -2px 0 #142e03,2px -2px 0 #142e03,-2px 2px 0 #142e03}
.xpb .xpt{position:relative;height:12px;background:#171717;box-shadow:0 0 0 2px #000,inset 0 0 0 1px #454545;overflow:hidden}
.xpb .xpf{position:absolute;inset:0;width:0;background:linear-gradient(#b8ff5c 0 25%,var(--xp) 25% 70%,var(--xp2) 70%);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.xpb .xpk{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 18 - 2px),rgba(0,0,0,.55) calc(100% / 18 - 2px) calc(100% / 18));pointer-events:none}
.xpb.cheio .xpn{color:#ffe27a}
/* dentro da caixa do placar (página inicial) */
.placar .xpb{padding:20px 12px 12px;box-sizing:border-box;background:rgba(0,0,0,.35)}
.placar .xpb .xpn{top:1px}
/* com a barra, o placar fica mais alto: o balão da raposa desce um pouco para não cobrir */
@media (min-width:901px){.hero-art:has(.placar .xpb:not([hidden])) .balao-raposa{top:48%}}
/* cartão com título (página do servidor e app) */
.blocao-card .xpb{margin-top:8px}
.blocao-card p{margin:6px 0 0;color:var(--muted,#aab4bf);font-size:.95rem}
.blocao-card h2{margin:0}
/* app */
.modo-app .xpb{padding-top:20px}
.ap-tela > .xpb{margin:0 0 10px}
.srv .blocao-card{padding:18px 18px 20px;margin-bottom:18px}
.srv .blocao-card .xpb{margin-top:12px}
.ap-tela .blocao-card{padding:12px 14px 14px;margin-bottom:12px}
.ap-tela .blocao-card .ap-sec-h h2{font-size:17px;margin:0}
.ap-tela .blocao-card .xpb{margin-top:10px}
.ap-tela .blocao-card .ap-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ap-tela .blocao-card .ap-sec-h small{color:var(--ash,#9a948f);white-space:nowrap}
/* cartão "bugado" até a revelação */
.blocao-card.bug h2,.blocao-card.bug p{position:relative;animation:bgl 1.7s steps(2,end) infinite}
.blocao-card.bug h2{letter-spacing:2px}
.blocao-card.bug p{color:var(--ash,#9a948f);font-family:var(--f-mc);font-size:13px;line-height:1.5;word-break:break-word}
@keyframes bgl{0%,91%{text-shadow:none;transform:none}92%{text-shadow:-2px 0 #ff3b3b,2px 0 #39e0ff;transform:translateX(1px)}95%{text-shadow:2px 0 #ff3b3b,-2px 0 #39e0ff;transform:translateX(-1px) skewX(-8deg)}97%{text-shadow:none;transform:none}}
.blocao-card.bug .xpf{animation:bgf 2.3s steps(1,end) infinite}
@keyframes bgf{0%,78%{filter:none}80%{filter:hue-rotate(300deg) brightness(1.5)}84%{filter:none}88%{filter:hue-rotate(180deg)}90%{filter:none}}
.blocao-card.bug .xpn{color:#ff5c5c;animation:bgn .8s steps(1,end) infinite}
@keyframes bgn{0%,68%{opacity:1}70%{opacity:.15}75%{opacity:1}}
@media (prefers-reduced-motion:reduce){.blocao-card.bug *{animation:none!important}}