/* Character avatar. Parts are placed in % of the base image, so it scales freely.
   Width follows height via aspect-ratio (set in js/character.js). */
.character {
  position: relative;
  height: clamp(160px, 38vh, 513px);
  pointer-events: none;
  transform-origin: 50% 100%;
}

.ch-layer {
  position: absolute;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.ch-pop { animation: ch-pop 260ms ease-out; }

@keyframes ch-pop {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.03, 0.97); }
  100% { transform: scale(1, 1); }
}

/* Face parts react stronger than the body, slightly staggered. No scaling,
   only movement. Default (laugh, wink): small hop. Angry: shake. Sad, cry: droop. */
.ch-pop .ch-eyes  { animation: ch-part-hop 380ms ease-out both; }
.ch-pop .ch-nose  { animation: ch-part-hop 340ms 30ms ease-out both; }
.ch-pop .ch-mouth { animation: ch-part-hop 400ms 60ms ease-out both; }

.ch-pop[data-emotion="angry"] .ch-eyes,
.ch-pop[data-emotion="angry"] .ch-mouth { animation-name: ch-part-shake; }

.ch-pop[data-emotion="sad"] .ch-eyes,
.ch-pop[data-emotion="sad"] .ch-mouth,
.ch-pop[data-emotion="cry"] .ch-eyes,
.ch-pop[data-emotion="cry"] .ch-mouth { animation-name: ch-part-droop; animation-duration: 520ms; }

@keyframes ch-part-hop {
  0%   { transform: none; }
  40%  { transform: translateY(-10%); }
  75%  { transform: translateY(3%); }
  100% { transform: none; }
}

@keyframes ch-part-shake {
  0%   { transform: none; }
  15%  { transform: translateX(-6%); }
  35%  { transform: translateX(6%); }
  55%  { transform: translateX(-4%); }
  75%  { transform: translateX(2%); }
  100% { transform: none; }
}

@keyframes ch-part-droop {
  0%   { transform: translateY(-21%); }
  50%  { transform: translateY(7%); }
  75%  { transform: translateY(-2%); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-pop, .ch-pop .ch-layer { animation: none !important; }
}

/* ---------- In the quiz: bottom-left area, left of the answers ----------
   The slot is the left grid column. The character is centered in it
   horizontally and sits on the bottom edge of the screen
   (it is decorative, so overlapping the iPhone home bar is fine). */
.character-slot {
  position: relative;
  container-type: size;
}
.character-slot .character {
  position: absolute;
  left: 50%;
  translate: -50% 0; /* separate from transform, so the pop animation still works */
  bottom: calc(-1 * (var(--gap) + var(--sa-bottom)));
  /* Fill the slot height, but never get wider than the slot. */
  height: calc(100% + var(--gap) + var(--sa-bottom));
  height: min(calc(100cqh + var(--gap) + var(--sa-bottom)),
              calc(100cqw * 513 / 326),
              600px);
}