/* ============================================================
   O personagem (ui/personagem.js).

   O anel da meta com um disco creme e dois olhos em cápsula. As cores
   saem dos tokens: o anel é o destaque do app, o disco é creme puxado
   para o destaque, e a tinta do rosto é fixa — o boneco é o mesmo nos
   dois temas, como a cara de um brinquedo não muda com a luz da sala.
   ============================================================ */

.pg {
  --pg-arco: var(--destaque);
  --pg-disco: color-mix(in srgb, var(--destaque) 12%, #FFFAF4);
  --pg-tinta: #231B16;
  --pg-brilho-olho: #FFFAF4;
  /* No escuro, 24 % de laranja sobre preto é castanho: o trilho clareia um
     pouco, para o anel por encher (o do palco) continuar a ser dele. */
  --pg-trilho: light-dark(color-mix(in srgb, var(--pg-arco) 24%, transparent), color-mix(in srgb, var(--pg-arco) 34%, rgb(255 236 220 / .14)));
  width: var(--pg-tamanho, 120px);
  height: calc(var(--pg-tamanho, 120px) * 170 / 160);
  display: block;
  overflow: visible;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.pg.is-tocavel { cursor: pointer; }

.pg * { transform-box: view-box; }
.pg .pg-olho-exp, .pg .pg-olho-aberto, .pg .pg-boca, .pg .pg-ponta, .pg .pg-confete, .pg .pg-sombra { transform-box: fill-box; transform-origin: center; }

.pg-sombra { fill: #000; opacity: .22; }
.pg-trilho { fill: none; stroke: var(--pg-trilho); }
.pg-arco, .pg-arco2 { fill: none; stroke-linecap: round; }
.pg-arco2 { filter: drop-shadow(0 0 2.5px rgb(0 0 0 / .55)); }
.pg-ponta {
  fill: color-mix(in srgb, var(--pg-arco) 22%, white);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pg-arco) 70%, transparent));
}
.pg-ponta.is-acima { fill: color-mix(in srgb, var(--atencao) 22%, white); }
.pg-brilho { fill: none; stroke-linecap: round; }
/* A onda de um gesto que acabou (o combinado, a festa): sai do anel e desfaz-se. */
.pg-onda { fill: none; stroke: var(--pg-arco); }
.pg .pg-onda { transform-box: fill-box; transform-origin: center; }
.pg-pontos circle { fill: var(--texto-3); }
.pg-numero-v { font: 700 25px var(--fonte); letter-spacing: -0.8px; fill: var(--texto); font-variant-numeric: tabular-nums; }
.pg-numero-r { font: 400 10.5px var(--fonte); fill: var(--texto-2); }

/* Numa cena de cor inteira o anel continua laranja — é a cara dele —, e só
   o trilho clareia. Branco, o anel fundia-se com o disco e virava uma bola. */
.pg--na-cena {
  --pg-trilho: rgb(255 255 255 / .24);
  --pg-disco: #FFF6EC;
}
.pg--na-cena .pg-sombra { opacity: .18; }

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .pg-ponta, .pg-arco2 { filter: none; }
}

/* ── o rosto por cima do anel da Hoje ──────────────────────── */

.pg-hoje {
  --pg-tinta: var(--texto);
  --pg-brilho-olho: var(--fundo);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* O anel da Hoje roda o svg dele −90° (v3.css) para o arco começar às doze;
   o rosto não roda com ele. */
.energia__anel .pg-hoje { transform: none; }
.pg-hoje * { transform-box: view-box; }
.pg-hoje .pg-olho-exp, .pg-hoje .pg-olho-aberto, .pg-hoje .pg-boca, .pg-hoje .pg-confete { transform-box: fill-box; transform-origin: center; }
/* O anel da Hoje acorda com um toque: o ponteiro diz que ele responde. */
.energia__anel { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* No cabeçalho da conversa, por cima do nome, como a foto de um contacto. */
.chat__title .pg { margin-bottom: 2px; }

/* ── o céu: onde ele voa de uma tela para a outra (ui/voo.js) ── */

.ceu {
  position: fixed;
  inset: 0;
  z-index: 97;
  pointer-events: none;
  overflow: hidden;
}
.ceu .voo {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Enquanto voa, o desenho de cá espera escondido; a transição de opacidade
   de outros estilos não pode atrasar o aparecer dele no pouso. */
.pg { transition: none; }