/* ==========================================================================
   Progression — XP, levels, coins, achievements, badges, leaderboards
   ========================================================================== */

/* ---------------------- Celebration overlays (in-game) --------------------- */

.prog-fx-root {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
}

.prog-fx-xp {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--gradient-gold); color: #241300;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  box-shadow: 0 12px 32px rgba(242,183,5,0.4);
  animation: prog-xp-fly 2.6s var(--ease-out) forwards;
}
@keyframes prog-xp-fly {
  0%   { opacity: 0; transform: translateY(30px) scale(0.8); }
  15%  { opacity: 1; transform: translateY(0) scale(1.06); }
  25%  { transform: translateY(0) scale(1); }
  75%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.95); }
}
.prog-fx-coins { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); opacity: 0.85; }

.prog-fx-levelup { position: relative; display: grid; place-items: center; }
.prog-fx-levelup-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-5) var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--gradient-card), var(--glass-fill-strong);
  border: 1px solid var(--color-gold);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 20px 60px rgba(242,183,5,0.35);
  animation: prog-levelup-in 2.8s var(--ease-spring) forwards;
}
@keyframes prog-levelup-in {
  0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  12%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  22%  { transform: scale(1) rotate(0); }
  82%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.94) translateY(-20px); }
}
.prog-fx-levelup-inner .material-symbols-rounded { font-size: 34px; color: var(--color-gold); }
.prog-fx-levelup-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 3px;
  color: var(--color-text-muted); margin-top: 4px;
}
.prog-fx-levelup-num {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800;
  background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.1;
}

/* Radiating burst behind the level-up card */
.prog-fx-burst {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,183,5,0.35) 0%, rgba(242,183,5,0) 70%);
  animation: prog-burst 2.8s ease-out forwards;
}
@keyframes prog-burst {
  0%   { transform: scale(0.3); opacity: 0; }
  20%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.prog-fx-achievement {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--gradient-card), var(--glass-fill-strong);
  border: 1px solid var(--color-teal);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 16px 44px rgba(61,220,151,0.3);
  max-width: 340px;
  animation: prog-ach-in 3.2s var(--ease-spring) forwards;
}
@keyframes prog-ach-in {
  0%   { opacity: 0; transform: translateX(60px) scale(0.9); }
  10%  { opacity: 1; transform: translateX(0) scale(1.04); }
  18%  { transform: scale(1); }
  85%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-30px) scale(0.96); }
}
.prog-fx-ach-icon {
  font-size: 34px; color: var(--color-teal);
  animation: prog-ach-spin 900ms var(--ease-spring);
}
@keyframes prog-ach-spin {
  0%   { transform: rotate(-180deg) scale(0.4); }
  100% { transform: rotate(0) scale(1); }
}
.prog-fx-ach-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 2px; color: var(--color-teal); }
.prog-fx-ach-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.prog-fx-ach-reward { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ------------------------- Progression page: hero -------------------------- */

.prog-hero { padding: var(--space-6) var(--space-5); text-align: center; margin-bottom: var(--space-5); }

.prog-level-ring { position: relative; width: 110px; height: 110px; margin: 0 auto var(--space-4); }
.prog-level-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.prog-level-ring circle { fill: none; stroke-width: 8; }
.prog-level-ring .track { stroke: var(--glass-border); }
.prog-level-ring .progress {
  stroke: url(#progGold); stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
.prog-level-ring .level-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.prog-level-ring .level-num strong {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800;
  background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.prog-level-ring .level-num span { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--color-text-muted); }

.prog-xp-label { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }

.prog-currency-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.prog-currency {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
}
.prog-currency.coins { color: var(--color-gold); border-color: rgba(242,183,5,0.4); }
.prog-currency.streak { color: var(--color-coral); border-color: rgba(255,107,107,0.4); }
.prog-currency .material-symbols-rounded { font-size: 18px; }

/* Counting-up number animation for XP/coin totals */
.prog-count { display: inline-block; }
.prog-count.bumping { animation: prog-count-bump 420ms var(--ease-spring); }
@keyframes prog-count-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); color: var(--color-gold); }
  100% { transform: scale(1); }
}

/* --------------------------- Daily reward card ----------------------------- */

.prog-daily-card { padding: var(--space-5); margin-bottom: var(--space-5); text-align: center; }
.prog-daily-days { display: flex; gap: 5px; justify-content: center; margin: var(--space-4) 0; flex-wrap: wrap; }
.prog-daily-day {
  width: 36px; height: 44px; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  font-size: 9px; color: var(--color-text-muted); gap: 2px;
}
.prog-daily-day .material-symbols-rounded { font-size: 14px; }
.prog-daily-day.claimed { background: var(--gradient-gold); color: #241300; border-color: transparent; }
.prog-daily-day.next { border-color: var(--color-gold); animation: prog-day-pulse 1.8s ease-in-out infinite; }
@keyframes prog-day-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(242,183,5,0); }
  50%     { box-shadow: 0 0 0 4px rgba(242,183,5,0.22); }
}

.prog-claim-burst { animation: prog-claim 700ms var(--ease-spring); }
@keyframes prog-claim {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ------------------------------- Stats grid -------------------------------- */

.prog-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 560px) { .prog-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.prog-stat { padding: var(--space-4); text-align: center; }
.prog-stat strong {
  display: block; font-family: var(--font-display); font-size: var(--fs-xl);
  color: var(--color-gold); line-height: 1.1;
}
.prog-stat span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* --------------------------- Achievements & badges -------------------------- */

.prog-ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 620px) { .prog-ach-grid { grid-template-columns: repeat(3, 1fr); } }

.prog-ach {
  padding: var(--space-4) var(--space-3); text-align: center;
  border-radius: var(--radius-md);
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  transition: transform var(--dur-base) var(--ease-spring);
}
.prog-ach.locked { opacity: 0.42; filter: grayscale(0.7); }
.prog-ach.unlocked { border-color: rgba(242,183,5,0.5); background: rgba(242,183,5,0.08); }
.prog-ach.unlocked:hover { transform: translateY(-3px); }
.prog-ach .material-symbols-rounded { font-size: 28px; color: var(--color-gold); display: block; margin-bottom: 6px; }
.prog-ach .ach-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); }
.prog-ach .ach-desc { font-size: 10px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.3; }
.prog-ach .ach-reward { font-size: 9px; color: var(--color-gold); margin-top: 4px; font-weight: 700; }

.prog-badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.prog-badge {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--space-3); min-width: 78px;
  border-radius: var(--radius-md);
  background: var(--gradient-card), var(--glass-fill);
  border: 1px solid rgba(242,183,5,0.4);
  animation: prog-badge-in 480ms var(--ease-spring) both;
}
@keyframes prog-badge-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.prog-badge .material-symbols-rounded { font-size: 26px; color: var(--color-gold); }
.prog-badge .badge-name { font-size: 10px; font-weight: 700; text-align: center; }

/* ------------------------------ Leaderboard -------------------------------- */

.prog-lb-tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
.prog-lb-tabs::-webkit-scrollbar { display: none; }
.prog-lb-tab {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--glass-fill); border: 1px solid var(--glass-border);
  color: var(--color-text-muted); font-size: var(--fs-xs); font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base), color var(--dur-base);
}
.prog-lb-tab.active { background: var(--gradient-gold); color: #241300; border-color: transparent; }

.prog-lb-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--glass-border);
  animation: prog-lb-in 380ms var(--ease-out) both;
}
@keyframes prog-lb-in {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0); }
}
.prog-lb-row:last-child { border-bottom: none; }
.prog-lb-row.is-you { background: rgba(242,183,5,0.10); border-radius: var(--radius-sm); border-bottom-color: transparent; }
.prog-lb-rank { width: 30px; text-align: center; font-family: var(--font-display); font-weight: 800; color: var(--color-text-muted); }
.prog-lb-row:nth-child(1) .prog-lb-rank { color: var(--color-gold); }
.prog-lb-row:nth-child(2) .prog-lb-rank { color: #C7C2E8; }
.prog-lb-row:nth-child(3) .prog-lb-rank { color: #CD8E5A; }
.prog-lb-name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-sm); }
.prog-lb-level { font-size: 10px; color: var(--color-text-muted); }
.prog-lb-value { font-family: var(--font-mono); font-weight: 700; color: var(--color-gold); }

/* ---------------------------- Match history -------------------------------- */

.prog-history-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--glass-border);
  font-size: var(--fs-sm);
}
.prog-history-row:last-child { border-bottom: none; }
.prog-history-row .result-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.prog-history-row .result-dot.won { background: rgba(242,183,5,0.2); color: var(--color-gold); }
.prog-history-row .result-dot.lost { background: var(--glass-fill); color: var(--color-text-muted); }
.prog-history-row .result-dot .material-symbols-rounded { font-size: 16px; }
.prog-history-row .hist-game { font-weight: 600; }
.prog-history-row .hist-meta { font-size: 10px; color: var(--color-text-muted); }
.prog-history-row .hist-xp { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-gold); }

.prog-section-tabs { display: flex; gap: var(--space-2); overflow-x: auto; margin-bottom: var(--space-5); padding-bottom: var(--space-2); }
.prog-section-tabs::-webkit-scrollbar { display: none; }