/* Efecto "humo" al elegir/sumar un animalito en /jugar (js/efectos.js). Archivo propio: quitarlo no afecta al resto. */
:root { --efx-oro: #F2B705; --efx-oro2: #FFD54A; --efx-verde: #0EA96B; --efx-txt: #0C1A17; --efx-txt-bg: rgba(255, 255, 255, .92); }
:root[data-theme="dark"] { --efx-oro: #FFE27A; --efx-oro2: #FFF1B8; --efx-verde: #5FE3AE; --efx-txt: #0B1220; --efx-txt-bg: rgba(255, 236, 160, .95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --efx-oro: #FFE27A; --efx-oro2: #FFF1B8; --efx-verde: #5FE3AE; --efx-txt: #0B1220; --efx-txt-bg: rgba(255, 236, 160, .95); } }
#efxCapa { position: fixed; inset: 0; pointer-events: none; z-index: 37; overflow: hidden; contain: strict; }
.efx { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.efx-p { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; opacity: 0; filter: blur(1.5px); }
.efx-p.oro { background: radial-gradient(circle at 40% 35%, var(--efx-oro2), color-mix(in srgb, var(--efx-oro) 70%, transparent) 45%, transparent 70%); }
.efx-p.verde { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--efx-verde) 80%, white), color-mix(in srgb, var(--efx-verde) 55%, transparent) 45%, transparent 70%); }
.efx-c { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--efx-oro2); box-shadow: 0 0 6px var(--efx-oro); will-change: transform, opacity; opacity: 0; }
.efx-t { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--mono, monospace); font-weight: 800; font-size: 15px; color: var(--efx-txt); background: var(--efx-txt-bg); padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 14px rgba(242, 183, 5, .45); will-change: transform, opacity; opacity: 0; }