/* comunidade-v2-qg-artes.css · 09/11/2026 · "melhorar o design de todas as badges, medalhas, efeitos,
 * animações, artes da comunidade" (JR).
 *
 *   1. NOME DOURADO (Prata da Casa Raiz): classe reutilizável .qg-nome-ouro, e o dourado automático em
 *      quem tem a medalha (post .who, comentário .cw, perfil #pf-nm) lido pelo slot de medalhas
 *      (.cv2-med-i[data-med="prata_da_casa_raiz"], pintado por comunidade-v2-economia.js).
 *   2. JR COIN na HUD: a moeda em vetor (/midia/qg-artes/jr-coin.svg) antes do "COIN".
 *   3. GANHO DE COIN: quando o saldo da HUD sobe, a moeda nasce logo abaixo do número e sobe por cima dele com o "+N"
 *      (quem cria o nó é comunidade-v2-medalhas-fx.js; aqui só a cara e o movimento).
 *
 *   MOVIMENTO: só transform/opacity, atrás de prefers-reduced-motion: no-preference.
 *   Sob reduce: o "+N" aparece e some parado (só opacidade), nada gira nem sobe.
 *   Paleta: #060608 + #F26A2E; o ouro (#E8B53D/#F2C866) é exclusivo do nome Prata da Casa Raiz.
 */

/* ── 1. nome dourado ─────────────────────────────────────────────────────────── */
.qg-nome-ouro,
.who:has(.cv2-med-i[data-med="prata_da_casa_raiz"]),
.cw:has(.cv2-med-i[data-med="prata_da_casa_raiz"]),
#pf-top:has(.cv2-med-i[data-med="prata_da_casa_raiz"]) #pf-nm{
  color:#E8B53D;font-weight:700
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .qg-nome-ouro,
  .who:has(.cv2-med-i[data-med="prata_da_casa_raiz"]),
  .cw:has(.cv2-med-i[data-med="prata_da_casa_raiz"]),
  #pf-top:has(.cv2-med-i[data-med="prata_da_casa_raiz"]) #pf-nm{
    background-image:linear-gradient(100deg,#B9822A 0%,#F2C866 30%,#FFF1C2 46%,#E8B53D 62%,#A8741C 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 6px rgba(232,181,61,.28))
  }
}
/* o brilho que passa: só na classe explícita, com o texto repetido em data-nome
   (<b class="qg-nome-ouro" data-nome="Fulano">Fulano</b>) */
.qg-nome-ouro{position:relative;display:inline-block}
.qg-nome-ouro[data-nome]::after{
  content:attr(data-nome);position:absolute;inset:0;pointer-events:none;
  -webkit-text-fill-color:#FFF6DC;color:#FFF6DC;background:none;opacity:0
}
@media (prefers-reduced-motion:no-preference){
  .qg-nome-ouro[data-nome]::after{animation:qgOuroBrilha 5.5s cubic-bezier(.15,.75,.35,1) 1.4s infinite}
}
@keyframes qgOuroBrilha{0%,72%,100%{opacity:0}80%{opacity:.55}}

/* ── 2. a moeda na HUD ───────────────────────────────────────────────────────── */
.cv2-hudn small::before{
  content:"";display:inline-block;width:11px;height:11px;margin:0 4px -2px 0;
  background:url(/midia/qg-artes/jr-coin.svg) center/contain no-repeat
}

/* ── 3. ganho de coin (+N subindo do saldo) ──────────────────────────────────── */
.qgc-voa{
  position:fixed;z-index:2147483000;left:var(--x,50%);top:var(--y,50%);pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;
  background:rgba(6,6,8,.92);border:1px solid rgba(242,106,46,.55);
  box-shadow:0 10px 24px -12px rgba(242,106,46,.9);
  font:700 14px/1 var(--c2-disp,ui-sans-serif,system-ui,sans-serif);color:#FFB283;
  font-variant-numeric:tabular-nums;transform:translate(-50%,0);opacity:0
}
.qgc-voa img{display:block;width:22px;height:22px}
.qgc-voa.qgc-on{animation:qgcAparece 1.6s linear both}
@media (prefers-reduced-motion:no-preference){
  .qgc-voa.qgc-on{animation:qgcSobe 1.5s cubic-bezier(.16,1,.3,1) both}
  .qgc-voa.qgc-on img{animation:qgcGira .9s cubic-bezier(.16,1,.3,1) both}
  .cv2-hudn.qgc-pulso{animation:qgcPulso .6s cubic-bezier(.16,1,.3,1) both}
}
@keyframes qgcAparece{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}
@keyframes qgcSobe{
  0%{opacity:0;transform:translate(-50%,40%) scale(.7)}
  14%{opacity:1;transform:translate(-50%,-10%) scale(1.06)}
  26%{transform:translate(-50%,-15%) scale(1)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-110%) scale(.96)}
}
@keyframes qgcGira{0%{transform:rotateY(0)}100%{transform:rotateY(720deg)}}
@keyframes qgcPulso{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}