/* ---------- Efecto de ganar monedas ---------- */
.gain-pop {
  position: fixed; left: 50%; bottom: 40px; z-index: 70; display: flex; align-items: center; gap: 8px; pointer-events: none;
  padding: 9px 14px 9px 10px; background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 10px;
  font-family: var(--px); font-size: 13px; box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 rgba(0, 0, 0, 0.3);
  animation: gainpop 1.4s ease-out forwards;
}
@keyframes gainpop {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(0.8); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  30% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}
.coin-ico.fly { position: fixed; z-index: 80; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(31, 29, 46, 0.4)); }
.coins.bump { animation: bump 0.22s ease-out; }
@keyframes bump { 40% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .gain-pop { animation: none; } .coins.bump { animation: none; } }

/* Contador de monedas: fuente pixel nítida. --coin-fs lo calcula main.js para que cada "pixel" de la
   fuente (1/8 del tamaño) ocupe un número entero de píxeles reales de pantalla; sin sombras ni espaciado. */
.coins, .gain-pop {
  font-family: var(--px); font-size: var(--coin-fs, 16px); line-height: 1; letter-spacing: 0; text-shadow: none;
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
}
.coins { color: #14260a; padding-top: 6px; padding-bottom: 6px; }