/* ============================================================
   Rasgos visuales del personaje que huye — compartido entre
   frontend/personaje/, frontend/i/ y la vista previa del constructor.
   ============================================================ */

.personaje {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.personaje-cuerpo {
  display: block;
}

.ojos {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  pointer-events: none;
}

.ojo {
  width: 13px;
  height: 13px;
  background: var(--color-papel);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
}

.personaje.parpadeando .ojo {
  transform: scaleY(0.15);
}

.personaje.nervioso .ojo {
  transform: scale(1.4);
}

.personaje.nervioso.parpadeando .ojo {
  transform: scale(1.4) scaleY(0.15);
}

.pupila {
  width: 5px;
  height: 5px;
  background: var(--color-tinta);
  border-radius: 50%;
}

.sudor {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 13px;
  animation: gota-cae 0.6s ease-in-out infinite alternate;
}

@keyframes gota-cae {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4px);
  }
}

.patitas {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  pointer-events: none;
}

.patita {
  width: 7px;
  height: 12px;
  background: color-mix(in srgb, var(--acento-travieso) 55%, black);
  border-radius: 4px;
  transform-origin: top center;
  animation: patita-camina var(--duracion-patita, 900ms) ease-in-out infinite;
}

.patita-der {
  animation-delay: calc(var(--duracion-patita, 900ms) * -0.5);
}

@keyframes patita-camina {
  0%,
  100% {
    transform: rotate(-24deg);
  }
  50% {
    transform: rotate(24deg);
  }
}

.personaje.movimiento-reducido .ojos,
.personaje.movimiento-reducido .sudor,
.personaje.movimiento-reducido .patitas {
  display: none;
}

.personaje.rendido .ojos,
.personaje.rendido .sudor,
.personaje.rendido .patitas {
  display: none;
}

.personaje.rendido {
  cursor: pointer;
  /* El "No" tiene relleno asimétrico y ancho mínimo para hacerle espacio
     a los ojos/patitas; ya rendido, debe verse igual que un "Sí" normal. */
  padding: 0.9rem 1.8rem;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes teletransporte-parpadeo {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
}

.personaje.teletransportando {
  animation: teletransporte-parpadeo 0.25s ease-in-out;
}