/* shared/sats-pop.js. .sats-num is how sats look everywhere a game shows them big: the home page stats' font
   (JetBrains Mono 800). Won is green, lost is red. */
.sats-num { font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; color: #39ff88; }
.sats-num.lose { color: #ff3355; }
.sats-num.even { color: var(--ink, #fff); }
/* the pop-up: rises (won) or sinks (lost) by --travel from where it starts, fading fast */
.sats-pop { position: absolute; left: 50%; top: 50%; z-index: 30; font-size: 38px; line-height: 1; pointer-events: none; --travel: 120px;
  animation: satsUp 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
.sats-pop.lose { animation-name: satsDown; }
.sats-pop.top { position: fixed; top: calc(var(--nav-bottom, 90px) + 150px); }
@keyframes satsUp { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0 } 12% { transform: translate(-50%, calc(-50% - var(--travel) * .18)) scale(1); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(-50%, calc(-50% - var(--travel))) scale(1); opacity: 0 } }
@keyframes satsDown { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0 } 12% { transform: translate(-50%, calc(-50% + var(--travel) * .18)) scale(1); opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(-50%, calc(-50% + var(--travel))) scale(1); opacity: 0 } }