/* Shared image-card deltas: spending first, charm gain second.
   Both themes use a dark image overlay, so these colors stay bright. */
.card-effects { --card-loss: #ffadc8; --card-gain: #ceef9b; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 8px; text-shadow: none; }
.card-effect { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 8px; border: 1px solid; border-radius: 8px; background: #15131dd9; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.card-effect.is-loss { color: var(--card-loss); border-color: #ffadc838; }
.card-effect.is-gain { color: var(--card-gain); border-color: #ceef9b38; }
.card-effect .icon { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 600px) {
  .card-effect { padding: 5px 7px; border-radius: 6px; font-size: 11px; }
}
@media (max-width: 360px) {
  .card-effects { gap: 4px; }
  .card-effect { padding: 5px 4px; gap: 3px; font-size: 10px; }
  .card-effect .icon { width: 12px; height: 12px; }
}