/* BoboEdu: token-economy.css
   Shared token result totals and the decorative, quantity-matched token shower. */
.token-summary {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg);
  overflow-wrap: anywhere;
}
.token-summary h3 {
  margin: 0;
  font-size: 18px;
}
.token-summary p {
  margin: 0;
}
.token-total {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.token-total svg {
  flex: none;
}
.token-total strong {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.token-total.good {
  color: var(--good);
}
.token-total.bad {
  color: var(--bad);
}
.token-breakdown {
  color: var(--muted);
  font-size: 15px;
}
.token-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.falling-token {
  position: absolute;
  top: -60px;
  width: 40px;
  height: 40px;
  opacity: 0;
  animation: token-fall var(--duration) linear var(--delay) both;
}
.falling-token svg {
  display: block;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2));
}
@keyframes token-fall {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) rotate(0deg);
  }
  8%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(100dvh + 120px)) rotate(var(--rotation));
  }
}
@media (prefers-reduced-motion: reduce) {
  .token-rain {
    display: none;
  }
}