Caldero de pociones
Echa dos ingredientes y hierve. Cada combinación lanza un efecto CSS distinto sobre toda la página.
Cómo funciona#
Eliges hasta 4 ingredientes de los 16 disponibles (cósmico, elemento, flora, fauna) y pulsas hervir. Si la combinación coincide con una de las 22 recetas sale una poción; si no, chisporrotea (fizzle) y suma a las estadísticas.
Cada poción aplica una clase .potion-* al <html> que activa un filter o un @keyframes de globals.css sobre toda la página. Las recetas raras y legendarias añaden además un overlay DOM con partículas (lluvia, rayos, escarcha, aurora, matrix…). La duración varía por rareza: común 4.6s, rara 5.8s, legendaria 7.2s.
El descubrimiento, los conteos por receta, los pinchos y los logros se persisten en localStorage. Tres pestañas: ingredientes, grimorio (recetas con búsqueda inversa al cargar) y stats con barra de progreso.
Atajos: B hervir, R aleatorio, C limpiar.
Respeta prefers-reduced-motion: los efectos de pantalla quedan inhabilitados.
De dónde viene#
