/* ==========================================================
   FleetFixer  - Gamification UI Components
   Rank badges, XP bars, badge cards, and leaderboard styles.
   ========================================================== */

/* ═══ RANK BADGE ═══ */
.rank-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:20px;
  background:var(--bg, #f0f4f8);border:1px solid var(--stroke, #bcc8d4);
  font-size:13px;font-weight:700;color:var(--text, #0b2545);
}
.rank-emoji{font-size:16px}
.rank-name{font-weight:800}

/* ═══ XP BAR ═══ */
.xp-bar-wrap{width:100%}
.xp-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.xp-bar-rank{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px}
.xp-bar-xp{font-size:13px;font-weight:700;color:var(--accent, #1f5fa8)}
.xp-bar-track{
  height:10px;border-radius:5px;background:var(--stroke, #bcc8d4);
  overflow:hidden;
}
.xp-bar-fill{
  height:100%;border-radius:5px;
  background:var(--game-gradient, linear-gradient(135deg,#1f5fa8,#4fb3d6));
  transition:width .8s ease-out;
  min-width:2px;
}
.xp-bar-footer{margin-top:4px;font-size:11px;color:var(--muted, #506070);font-weight:600}

/* ═══ BADGE CARDS ═══ */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.badge-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:16px 10px;border-radius:12px;
  border:1px solid var(--stroke, #bcc8d4);background:var(--panel, #fff);
  transition:all .2s;
}
.badge-card.earned{
  border-color:var(--accent, #1f5fa8);
  box-shadow:0 2px 8px rgba(31,95,168,.08);
}
.badge-card.locked{opacity:.5;filter:grayscale(.6)}
.badge-emoji{font-size:28px;margin-bottom:6px;display:block}
.badge-name{font-size:12px;font-weight:800;margin-bottom:2px;color:var(--text, #0b2545)}
.badge-desc{font-size:11px;color:var(--muted, #506070);line-height:1.4}

/* ═══ LEADERBOARD ═══ */
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{
  text-align:left;padding:8px 10px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted, #506070);
  border-bottom:2px solid var(--stroke, #bcc8d4);
}
.lb-table td{padding:10px;font-size:14px;font-weight:600;border-bottom:1px solid var(--stroke, #bcc8d4)}
.lb-table tr:last-child td{border-bottom:none}
.lb-table .lb-pos{width:36px;text-align:center;font-weight:900;color:var(--muted, #506070)}
.lb-table .lb-pos.gold{color:#f59e0b}
.lb-table .lb-pos.silver{color:#94a3b8}
.lb-table .lb-pos.bronze{color:#ea580c}
.lb-table .lb-xp{text-align:right;font-weight:900;color:var(--accent, #1f5fa8)}
.lb-table .lb-rank-cell{font-size:12px;color:var(--muted, #506070)}

/* ═══ BADGE TOAST (notification) ═══ */
.badge-toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:var(--panel, #fff);border:1px solid var(--stroke, #bcc8d4);
  border-left:4px solid var(--accent, #1f5fa8);
  border-radius:12px;padding:14px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex;align-items:center;gap:12px;
  animation:badgeSlideIn .4s ease-out;
  max-width:320px;
}
.badge-toast .bt-emoji{font-size:32px;flex-shrink:0}
.badge-toast .bt-text{font-size:13px;font-weight:600;color:var(--text, #0b2545)}
.badge-toast .bt-text strong{display:block;font-size:14px;font-weight:800;margin-bottom:2px}
.badge-toast .bt-text span{color:var(--muted, #506070);font-weight:500}
@keyframes badgeSlideIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}

/* ═══ STATS CARDS ═══ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.stat-card{
  background:var(--bg, #f0f4f8);border-radius:10px;padding:14px;text-align:center;
}
.stat-card .sc-val{font-size:22px;font-weight:900;color:var(--accent, #1f5fa8)}
.stat-card .sc-label{font-size:11px;font-weight:600;color:var(--muted, #506070);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}