/* css/credits.css - /credits: balance, per-type summary, transaction
   history. The summary panel and list container come from base.css.
   The balance is the page's gradient card. */

.credits-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  border: 0;
  background: var(--gradient-brand);
  background-size: 160% 160%;
  color: var(--color-on-gradient);
  box-shadow: 0 30px 60px -26px var(--color-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: gradient-pan 10s ease-in-out infinite alternate;
}
.credits-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -70px;
  top: -130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  animation: float-y 6s ease-in-out infinite;
}
.credits-hero .panel__label,
.credits-hero .panel__label .icon { color: rgba(255, 255, 255, 0.9); }
.credits-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.credits-hero .btn--primary,
.credits-hero .btn--primary:hover:not(:disabled) { background: #ffffff; color: #4a2fd0; box-shadow: 0 12px 24px -10px rgba(30, 10, 80, 0.45); }
.credits-hero .btn:not(.btn--primary) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; box-shadow: none; }
.credits-hero .btn:not(.btn--primary):hover:not(:disabled) { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.6); }

.credits-balance {
  margin: 6px 0 0;
  color: inherit;
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.ledger-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--space-4);
}
.ledger-item__main { flex: 1; }

.ledger-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ledger-item__main > :first-child { color: var(--color-ink); font-weight: 700; }

.ledger-item__description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.ledger-item__date {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.ledger-amount {
  flex-shrink: 0;
  font-weight: 700;
}
.ledger-amount--positive { color: var(--color-success); }
.ledger-item .row-icon { --tone: var(--color-accent); }
.ledger-item:has(.ledger-amount--positive) .row-icon { --tone: var(--color-success); }
.ledger-amount--negative { color: var(--color-ink); }

/* ── Welcome bonus progress (021) ─────────────────────────────────────── */

.welcome-bonus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: var(--space-6);
}
.welcome-bonus[hidden] { display: none; }
.welcome-bonus__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--gradient-brand);
  color: var(--color-on-gradient);
  box-shadow: 0 10px 20px -10px var(--color-glow);
  animation: gift-wiggle 3.2s ease-in-out infinite;
}
@keyframes gift-wiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-10deg) scale(1.06); } 90% { transform: rotate(8deg) scale(1.06); } 95% { transform: rotate(-4deg); } }
.welcome-bonus__text strong { color: var(--color-ink); font-weight: 700; }
.welcome-bonus__text p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.welcome-bonus__progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.welcome-bonus__steps { display: flex; gap: 6px; }
.welcome-bonus__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-subtle);
}
.welcome-bonus__step.is-done {
  border: 0;
  background: var(--gradient-brand);
  color: var(--color-on-gradient);
  box-shadow: 0 6px 12px -6px var(--color-glow);
  animation: step-done 520ms var(--ease-spring) both;
}
.welcome-bonus__step:nth-child(2) { animation-delay: 120ms; }
.welcome-bonus__step:nth-child(3) { animation-delay: 240ms; }
@keyframes step-done { from { transform: scale(0.4) rotate(-90deg); opacity: 0; } }
.welcome-bonus__count { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .welcome-bonus { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .welcome-bonus__progress { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}