/* ---------- Personagens v4 (PixelChar) ----------
   Cada personagem é um <span class="pc3"> com a ilustração da folha em <img>,
   num card de cantos arredondados (o fundo escuro da folha vem junto, como
   na folha). O corpo inteiro tem a proporção da figura; o avatar e os NPCs
   são um quadrado com o rosto (object-position no alto do busto). */
.pc3 { position: relative; display: inline-block; width: 100%; line-height: 0; vertical-align: bottom; }
.pc3-corpo { aspect-ratio: var(--pc3-w, 80) / var(--pc3-h, 254); }
.pc3-rosto { aspect-ratio: 1; }
.pc3-card { border-radius: 10px; overflow: hidden; background: #0b1020; }
.pc3 > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.pc3-rosto > img { object-position: 50% 18%; }

/* ---------- CompilaCharacter — o personagem animado ----------
   Tudo é transform/opacity (fica no compositor). */
.cc { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; line-height: 0; }
.cc-img {
  display: block; width: 100%; height: auto; overflow: visible;
  position: relative; z-index: 1;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.cc::after {
  content: '';
  position: absolute; left: 50%; bottom: 1%;
  transform: translateX(-50%);
  width: 42%; height: 5%;
  background: rgba(0,0,0,0.38);
  border-radius: 50%;
  filter: blur(1.5px);
  z-index: 0;
}

/* ---- parado: respira (a ilustração sobe e desce de leve, devagar) ---- */
.cc-vivo .pc3 > img, .pc3-vivo > img { animation: pc3Respira 3.2s ease-in-out infinite; animation-delay: var(--cc-atraso, 0s); transform-origin: 50% 100%; }
@keyframes pc3Respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }

/* o close (o retrato): sem sombra no chão */
.cc-rosto::after { display: none; }

.cc-interactive { cursor: pointer; }
.cc-interactive:hover .cc-img { transform: translateY(-3%) scale(1.03); }

/* ---- reações ---- */
.cc-pulo .cc-img { animation: ccPulo 0.9s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes ccPulo {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(0) scale(1.1, 0.9); }
  40%  { transform: translateY(-16%) scale(0.95, 1.06); }
  62%  { transform: translateY(0) scale(1.06, 0.94); }
  78%  { transform: translateY(-5%) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
.cc-aceno .cc-img { animation: ccAceno 0.7s ease-in-out; transform-origin: 50% 100%; }
@keyframes ccAceno {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-2deg); }
}
.cc-tremor .cc-img { animation: ccTremor 0.6s ease-in-out; }
@keyframes ccTremor {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4%) rotate(-2deg); }
  40% { transform: translateX(3%) rotate(1deg); }
  60% { transform: translateX(-2%); }
  80% { transform: translateX(1%); }
}
/* compatibilidade: classe antiga usada por quem chamava a animação direto */
.cc-bounce { animation: ccPulo 0.6s cubic-bezier(0.34, 1.4, 0.64, 1); }
.cc-idlebob { animation: none; }

/* Balão de fala do mentor (usado nas lições) */
.cc-bubble {
  position: relative; background: var(--bg-surface-elevated, #121a33); border: 2px solid #334155;
  border-radius: 12px; padding: 12px 16px; font-size: 13.5px; color: var(--text-main, #e2e8f0);
  max-width: 320px; line-height: 1.5;
}
.cc-bubble::after {
  content: ''; position: absolute; left: -9px; bottom: 18px;
  width: 0; height: 0; border: 8px solid transparent; border-right-color: #334155;
}
.cc-bubble::before {
  content: ''; position: absolute; left: -6px; bottom: 18px; z-index: 1;
  width: 0; height: 0; border: 7px solid transparent; border-right-color: var(--bg-surface-elevated, #121a33);
}
.cc-mentor-row { display: flex; align-items: flex-end; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cc-vivo .pc3 > img, .pc3-vivo > img,
  .cc-pulo .cc-img, .cc-aceno .cc-img, .cc-tremor .cc-img, .cc-bounce { animation: none !important; }
  .cc-interactive:hover .cc-img { transform: none !important; }
}