/* ============================================================================
   BudgetGrid — Rewards. Motion lives here.

   Every animation is entrance or reaction: nothing loops forever except the
   streak flame, and that stops the moment the viewer asks for stillness.
   tokens.css already zeroes durations under prefers-reduced-motion; the
   explicit block at the foot of this file also cancels the keyframe animations
   outright, so a reduced-motion viewer gets the finished state immediately
   rather than a 1ms flicker of it.
   ==========================================================================*/

.rw { display: grid; gap: 1rem; }

/* --------------------------------------------------------------- the hero */
.rw-hero {
  position: relative; overflow: hidden;
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  background: linear-gradient(135deg, var(--surface-1, #fff), var(--surface-2, rgba(0,0,0,.03)));
}
/* A slow sheen behind the level ring — presence without demanding attention. */
.rw-hero-glow {
  position: absolute; inset: -40% -10% auto -10%; height: 180%;
  background: radial-gradient(60% 50% at 20% 30%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%);
  animation: rw-drift 14s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes rw-drift { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(8%, 4%, 0) scale(1.12); } }

.rw-hero-b { flex: 1 1 18rem; min-width: 0; position: relative; }
.rw-title { margin: 0 0 .15rem; font-size: 1.5rem; letter-spacing: -.01em; }
.rw-sub { margin: 0 0 .7rem; color: var(--ink-2, #667); }

.rw-lvl { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.rw-lvl-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.rw-lvl-n b { font-size: 2.2rem; font-weight: 700; }
.rw-lvl-n small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2, #667); }

/* The XP bar fills once, on entry. */
.rw-xpbar { height: 9px; border-radius: 99px; background: var(--line); overflow: hidden; max-width: 30rem; }
.rw-xpbar > i {
  display: block; height: 100%; width: var(--w); border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 55%, var(--teal)));
  transform-origin: left center; animation: rw-fill 1200ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes rw-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rw-hero-stats { display: flex; flex-wrap: wrap; gap: 1.35rem; margin-top: .9rem; }
.rw-stat { display: grid; line-height: 1.1; }
.rw-stat i { font-style: normal; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rw-stat small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, #667); }

/* The streak flame only burns when there IS a streak. */
.rw-flame.is-lit i { color: var(--gold); position: relative; }
.rw-flame.is-lit i::after {
  content: '🔥'; font-size: .95rem; margin-left: .3rem; display: inline-block;
  animation: rw-flicker 1.6s ease-in-out infinite; transform-origin: 50% 90%;
}
@keyframes rw-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  50%      { transform: scale(1.16) rotate(3deg); opacity: .82; }
}

/* --------------------------------------------------------- the four rings */
.rw-discs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .85rem; }
.rw-disc {
  display: flex; gap: .9rem; align-items: center; padding: .95rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface-1, #fff);
  transition: transform var(--t-base, 180ms) ease, box-shadow var(--t-base, 180ms) ease;
}
.rw-disc:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.rw-disc-b { min-width: 0; }
.rw-disc-b b { display: block; font-size: .9rem; }
.rw-disc-v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rw-disc-v i { font-style: normal; }
.rw-disc-b small { display: block; color: var(--ink-2, #667); font-size: .74rem; margin-top: .15rem; }
.rw-disc.is-great .rw-disc-v { color: var(--grid); }
.rw-disc.is-good  .rw-disc-v { color: var(--teal); }
.rw-disc.is-fair  .rw-disc-v { color: var(--gold); }
.rw-disc.is-poor  .rw-disc-v { color: var(--brick); }

/* ------------------------------------------------------------- the badges */
.rw-bhead h3 { margin: 0 0 .2rem; }
.rw-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; margin-top: .9rem; }

.rw-badge {
  position: relative; overflow: hidden; text-align: center; cursor: pointer;
  display: grid; gap: .35rem; justify-items: center; padding: 1.05rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  background: var(--surface-1, #fff); color: inherit; font: inherit;
  transition: transform var(--t-base, 180ms) ease, box-shadow var(--t-base, 180ms) ease, border-color var(--t-base, 180ms) ease;
}
.rw-badge:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.rw-badge:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 45%, transparent); }
.rw-badge-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--line); }
.rw-badge-ic .ic { width: 26px; height: 26px; }
.rw-badge b { font-size: .88rem; }
.rw-tier { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2, #667); }
.rw-badge-p { display: grid; gap: .2rem; width: 100%; }
.rw-badge-p small { font-size: .7rem; color: var(--ink-2, #667); font-variant-numeric: tabular-nums; }

.rw-badge.is-off { opacity: .55; filter: saturate(.25); }
.rw-badge.is-on.tier-1 .rw-badge-ic { background: color-mix(in srgb, #b87333 30%, transparent); color: #b87333; }
.rw-badge.is-on.tier-2 .rw-badge-ic { background: color-mix(in srgb, #9aa5b1 32%, transparent); color: #6b7683; }
.rw-badge.is-on.tier-3 .rw-badge-ic { background: color-mix(in srgb, var(--gold) 34%, transparent); color: var(--gold); }
.rw-badge.is-on.tier-3 { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }

/* A slow diagonal shine, only on earned badges. */
.rw-badge-shine { position: absolute; inset: 0; pointer-events: none; }
.rw-badge.is-on .rw-badge-shine::before {
  content: ''; position: absolute; top: -60%; left: -120%; width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg); animation: rw-shine 4.5s ease-in-out infinite;
}
@keyframes rw-shine { 0%, 65% { left: -120%; } 100% { left: 140%; } }

/* Earned during THIS session — a single, deliberate pop. */
.rw-badge.is-new { animation: rw-pop 900ms cubic-bezier(.34,1.56,.64,1) both; border-color: var(--gold); }
@keyframes rw-pop {
  0%   { transform: scale(.86) rotate(-4deg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); }
  55%  { transform: scale(1.09) rotate(2deg); box-shadow: 0 0 0 14px color-mix(in srgb, var(--gold) 0%, transparent); }
  100% { transform: none; }
}

/* ------------------------------------------------------------ the podium */
.rw-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: end; margin: .2rem 0 1.1rem; }
.rw-pod { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.rw-pod-av { position: relative; }
.rw-pod-rank {
  position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #1a1a1a;
  background: var(--line); border: 2px solid var(--surface-1, #fff);
}
.rw-pod-1 .rw-pod-rank { background: var(--gold); }
.rw-pod-2 .rw-pod-rank { background: #c6ccd4; }
.rw-pod-3 .rw-pod-rank { background: #cd8c52; }
.rw-pod b { font-size: .85rem; }
.rw-pod-score { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rw-pod-score i { font-style: normal; }
.rw-pod-block {
  width: 100%; border-radius: 10px 10px 0 0; border-top: 2px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--line) 85%, transparent), transparent);
  transform-origin: bottom center; animation: rw-rise 900ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * 120ms);
}
.rw-pod-1 .rw-pod-block { height: 74px; border-top-color: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 45%, transparent), transparent); }
.rw-pod-2 .rw-pod-block { height: 52px; }
.rw-pod-3 .rw-pod-block { height: 38px; }
@keyframes rw-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ------------------------------------------------------------ the tables */
.rw-sort { display: flex; gap: .35rem; flex-wrap: wrap; }
.rw-sort .chip { cursor: pointer; border: 0; font: inherit; }

.rw-row { animation: rw-slide 520ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 26ms); }
@keyframes rw-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.rw-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: .76rem; font-weight: 700; background: var(--line); }
.rw-rank-1 { background: var(--gold); color: #1a1a1a; }
.rw-rank-2 { background: #c6ccd4; color: #1a1a1a; }
.rw-rank-3 { background: #cd8c52; color: #1a1a1a; }

.rw-who { display: inline-flex; gap: .5rem; align-items: center; }
.rw-who small { display: block; color: var(--ink-2, #667); font-size: .72rem; }

/* A bar and its number, so the row scans at a glance and still reads exactly.
   The fill lives INSIDE a track that clips it; an absolutely-positioned fill
   sized against the whole cell ran straight over the number. */
.rw-mini { display: inline-flex; align-items: center; gap: .5rem; min-width: 6.5rem; width: 100%; }
.rw-mini-t { flex: 1 1 auto; min-width: 2.5rem; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rw-mini-t > i {
  display: block; height: 100%; width: var(--w); border-radius: 99px;
  animation: rw-fill 800ms cubic-bezier(.22,1,.36,1) both; transform-origin: left center;
}
.rw-mini > em {
  flex: 0 0 auto; font-style: normal; font-size: .76rem; min-width: 2.4ch; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink-2, #667);
}
.rw-mini.is-great .rw-mini-t > i { background: var(--grid); }
.rw-mini.is-good  .rw-mini-t > i { background: var(--teal); }
.rw-mini.is-fair  .rw-mini-t > i { background: var(--gold); }
.rw-mini.is-poor  .rw-mini-t > i { background: var(--brick); }

.rw-score { font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.rw-score i { font-style: normal; }
.rw-score.is-great { color: var(--grid); }
.rw-score.is-good  { color: var(--teal); }
.rw-score.is-fair  { color: var(--gold); }
.rw-score.is-poor  { color: var(--brick); }

/* -------------------------------------------------------- staggered entry */
.rw .rv { opacity: 0; transform: translateY(10px); }
.rw .rv.in {
  opacity: 1; transform: none;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 45ms);
}

/* ------------------------------------------------------ stillness, honoured
   Reduced motion gets the finished state, not a sped-up version of the show. */
@media (prefers-reduced-motion: reduce) {
  .rw-hero-glow, .rw-badge-shine::before, .rw-flame.is-lit i::after { animation: none !important; }
  .rw-xpbar > i, .rw-pod-block, .rw-row, .rw-mini-t > i, .rw-badge.is-new { animation: none !important; }
  .rw-xpbar > i, .rw-mini-t > i { transform: none !important; }
  .rw-pod-block { transform: scaleY(1) !important; opacity: 1 !important; }
  .rw .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rw-badge:hover, .rw-disc:hover { transform: none; }
}

/* A discipline that cannot honestly be attributed to this row. */
.rw-na { color: var(--ink-2, #667); opacity: .6; cursor: help; }