/* ============================================================
   Level badge — the small tier-coloured emblem showing a
   member's level, placed next to their name across the site
   (profile, chat, members, leaderboard, wall).
   ------------------------------------------------------------
   Rendered server-side via views/partials/levelBadge.hbs and
   client-side via /script/default/level-badge.js — both emit
   the SAME markup: <span class="level-badge tier-…">N</span>.
   Tiers come from services/pointsService.js (levelBadge()):
   newcomer · regular · seasoned · veteran · elite · legend.
   Loaded globally from views/layouts/default.hbs.
   ============================================================ */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 17px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: 'DM Sans', 'Segoe UI', Tahoma, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, #6b7280, #434a55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  user-select: none;
  white-space: nowrap;
}

/* Tier palettes. */
.level-badge.tier-newcomer {
  background: linear-gradient(135deg, #6b7280, #434a55);
  border-color: rgba(148, 158, 173, 0.4);
}

.level-badge.tier-regular {
  background: linear-gradient(135deg, #42c98e, #2c8f63);
  border-color: rgba(66, 201, 142, 0.5);
}

.level-badge.tier-seasoned {
  background: linear-gradient(135deg, #5b8af7, #3b62c4);
  border-color: rgba(91, 138, 247, 0.55);
}

.level-badge.tier-veteran {
  background: linear-gradient(135deg, #a879f7, #7d43c9);
  border-color: rgba(168, 121, 247, 0.55);
}

.level-badge.tier-elite {
  background: linear-gradient(135deg, #f7d774, #e0a327);
  border-color: rgba(245, 196, 81, 0.6);
  color: #3a2a05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.level-badge.tier-legend {
  background: linear-gradient(135deg, #ff7a7a, #d0342c);
  border-color: rgba(255, 122, 122, 0.6);
  box-shadow: 0 0 9px rgba(255, 90, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Slightly larger where there's room (profile identity, podium). */
.level-badge.level-badge-lg {
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  font-size: 12px;
  border-radius: 6px;
}