/* ============================================================
   Just Ball · Palco do personagem (03/11/2026, js/busto-palco.js, chave 'palco').
   O busto é o mesmo de css/avatar-jb.css, só maior; a profundidade é luz e camada em volta,
   nada sobe do plano. Só transform e opacity animam, sem backdrop-filter nem mix-blend novos.
   ============================================================ */

/* ---------- gatilhos no avatar pequeno ---------- */
.bp-gat{position:relative;overflow:visible!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bp-gat::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:1px solid var(--lime);pointer-events:none;
  opacity:.2;transform:scale(.985);animation:bpAnel 3.2s var(--e-io) infinite}
@keyframes bpAnel{0%,100%{opacity:.18;transform:scale(.985)}50%{opacity:.8;transform:scale(1)}}
.bp-gat:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.bp-gat:not(.pc__ph):active{transform:scale(.97)}
/* perfil próprio: pílula colada embaixo do avatar (o toque no avatar segue trocando a foto) */
.bp-pil{position:absolute;z-index:2;transform:translate(-50%,0);height:26px;padding:0 11px;border-radius:var(--rp);border:1px solid rgba(197,255,26,.45);
  background:#0b0f06;color:var(--lime);font:800 11px/1 var(--body);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.55);transition:transform .15s var(--e)}
.bp-pil::before{content:"";position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px}  /* área de toque de 44 px */
.bp-pil:active{transform:translate(-50%,0) scale(.97)}
.bp-pil:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ---------- o palco ---------- */
html.bp-aberto,html.bp-aberto body{overflow:hidden}
.bp{position:fixed;inset:0;z-index:900;overflow:hidden;background:#050505;color:var(--paper);font-family:var(--body);
  opacity:0;transition:opacity .3s var(--e);touch-action:none;-webkit-user-select:none;user-select:none}
.bp.is-on{opacity:1}
.bp.is-sai{opacity:0;transition:opacity .2s linear}
.bp__mundo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bp__l{position:absolute;inset:-24px;will-change:transform}

/* parede: o ginásio à noite (mesma arte do pódio), cortado no horizonte, com grão e o alto apagando no escuro */
.bp__parede,.bp__chao{background-repeat:no-repeat;background-image:url("../assets/visual3/palco.webp");
  background-size:auto var(--bp-hi,900px);background-position:50% var(--bp-hy,0px)}
.bp__parede{clip-path:inset(0 0 calc(100% - var(--bp-hz,400px)) 0)}
.bp__parede::before,.bp__chao::before{content:"";position:absolute;inset:0;pointer-events:none}
.bp__parede::before{background:url("../assets/visual3/grao-suave.webp") 0 0/64px 64px,
  linear-gradient(180deg,#050505 0%,rgba(5,5,5,.55) 22%,rgba(5,5,5,.1) 60%,rgba(5,5,5,.35) 100%);opacity:.95}
/* refletor: um feixe só, vindo de cima no eixo do busto */
.bp__cone{background:
  radial-gradient(60px 16px at calc(var(--bp-cx,50%) + 24px) 26px,rgba(240,255,205,.55),rgba(240,255,205,0)),
  conic-gradient(from 165deg at calc(var(--bp-cx,50%) + 24px) 18px,rgba(214,255,140,0) 0deg,rgba(214,255,140,.07) 9deg,rgba(232,255,190,.15) 15deg,rgba(214,255,140,.07) 21deg,rgba(214,255,140,0) 30deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 88%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 88%);
  animation:bpRespira 9s var(--e-io) infinite alternate}
@keyframes bpRespira{from{opacity:.85}to{opacity:1}}
/* chão: o assoalho do mesmo ginásio, da linha do horizonte pra baixo, apagando no escuro onde o texto senta */
.bp__chao{clip-path:inset(calc(var(--bp-hz,400px) - 1px) 0 0 0)}
.bp__chao::before{background:linear-gradient(180deg,rgba(5,5,5,.25) 0,rgba(5,5,5,.25) calc(var(--bp-hz,400px) + 10px),rgba(5,5,5,.86) calc(var(--bp-hz,400px) + 150px),#050505 calc(var(--bp-hz,400px) + 300px))}
.bp__poca{position:absolute;left:calc(var(--bp-cx,50%) + 24px);top:calc(var(--bp-pe,400px) + 24px - 34px);width:calc(var(--bp-bw,280px) * 1.55);height:78px;
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(226,255,170,.30),rgba(197,255,26,.10) 55%,rgba(197,255,26,0))}
/* poeira fina de luz, só dentro do feixe */
.bp__poeira{inset:auto;left:calc(var(--bp-cx,50%) - var(--bp-bw,280px) * .75);width:calc(var(--bp-bw,280px) * 1.5);top:0;height:var(--bp-pe,400px)}
.bp__poeira i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(236,255,200,.85);
  opacity:0;animation:bpPo var(--d) linear var(--a) infinite}
@keyframes bpPo{0%{opacity:0;transform:translate3d(0,0,0)}18%{opacity:.7}80%{opacity:.35}100%{opacity:0;transform:translate3d(10px,-54px,0)}}

/* fechar */
.bp__x{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:44px;height:44px;background:rgba(18,18,18,.82)}
.bp__x svg{width:18px;height:18px;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round}
.bp__x:active{transform:scale(.97)}

/* conteúdo: busto em cima do chão, ficha embaixo; arrastar pra baixo leva tudo junto */
.bp__vai{position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(100%,480px);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 66px) var(--gut,20px) calc(env(safe-area-inset-bottom,0px) + 20px);
  transform:translate3d(0,var(--bp-desce,0px),0);opacity:var(--bp-some,1);transition:transform .32s var(--e),opacity .32s var(--e)}
.bp--arrasta .bp__vai{transition:none}
.bp__palco{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}
.bp__busto{position:relative;z-index:1;flex:none;width:min(72vw,300px,38svh);aspect-ratio:1/1;border-radius:30px;overflow:hidden;
  box-shadow:0 34px 50px -26px rgba(0,0,0,.9),0 0 90px -12px rgba(197,255,26,.20);
  opacity:0;transform:translate3d(0,14px,0) scale(.95);transition:opacity .42s var(--e) .05s,transform .55s var(--e) .05s}
.bp.is-on .bp__busto{opacity:1;transform:none}
.bp__busto::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(197,255,26,.20),inset 0 1px 0 rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(236,255,190,.07),rgba(236,255,190,0) 34%)}
.bp__busto .jbav{border-radius:inherit}
/* o 7 que estoura a caixa (js/busto-palco.js, montarSete): dentro, o mesmo desenho troca o 7 do fsete só no palco;
   fora, a camada irmã atrás da caixa, com a mesma entrada do busto. Um 7 só, emendado na borda. */
/* 03/11/2026 (Jordan): "coloca esse tipo de busto no meu perfil, e o fundo fica daquele jeito": o mesmo 7 do palco
   (assets/avatar/sete-v3.svg, tirado do montarSete em 390) em todo busto com fsete, cortado pela borda da caixa */
.jbav.jbav--fsete .jbav__cena::before{background:url("../assets/avatar/sete-v3.svg?v=20261103") 0 0/100% 100% no-repeat}
.bp .bp__busto .jbav--fsete .jbav__cena::before{background:var(--bp7) 0 0/100% 100% no-repeat}
.bp__sete7{position:absolute;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(0,14px,0) scale(.95);
  transition:opacity .42s var(--e) .05s,transform .55s var(--e) .05s}
.bp.is-on .bp__sete7{opacity:.9;transform:none}
.bp__sete7 svg{position:absolute;left:0;top:0;display:block}
/* sombra de contato: o busto pesa no chão */
.bp__sombra{position:absolute;z-index:0;left:50%;bottom:-10px;width:calc(var(--bp-bw,280px) * .92);height:30px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.45) 55%,rgba(0,0,0,0))}

.bp__info{flex:none;margin-top:26px;text-align:center;opacity:0;transform:translate3d(0,10px,0);transition:opacity .4s var(--e) .14s,transform .5s var(--e) .14s}
.bp.is-on .bp__info{opacity:1;transform:none}
.bp__n{margin:6px 0 0;font-family:var(--disp);font-weight:900;font-size:clamp(34px,10.5vw,44px);line-height:.92;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance}
.bp__m{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.bp__bdg{display:flex;justify-content:center;margin-top:10px}
.bp__bdg .bdgs{justify-content:center}

.bp-veste{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:16px;padding:10px;text-align:left;
  border-radius:var(--r);border:1px solid var(--line);background:rgba(11,11,11,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bp-veste__ph{width:48px;height:48px;border-radius:var(--rs);object-fit:cover;background:var(--ink-3);display:block}
.bp-veste__b{min-width:0;display:flex;flex-direction:column;gap:3px}
.bp-veste__k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.bp-veste__n{font-family:var(--disp);font-weight:800;font-size:19px;line-height:.98;text-transform:uppercase;text-wrap:balance}
.bp-veste__pr{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mute)}
.bp-veste__go{min-height:44px;text-decoration:none}
.bp__x1{margin-top:12px}
.bp .jbqm{margin-top:12px;text-align:left}

@media (hover:hover) and (pointer:fine){.bp-pil:hover{border-color:var(--lime)}}
@media (prefers-reduced-motion:reduce){
  .bp-gat::after{animation:none;opacity:.55;transform:none}
  .bp__poeira,.bp__poeira i{display:none}
  .bp__cone{animation:none}
  .bp__busto,.bp__info,.bp__sete7{transition:opacity .2s linear;transform:none}
}