.badges-page {
  width: 100%;
  max-width: none;
}

.badges-intro {
  margin-bottom: 20px;
}

.badges-intro-title {
  margin: 0 0 6px;
}

.badges-intro-lead {
  color: var(--muted, #6b7280);
  max-width: 700px;
}

.badges-grid-summary {
  font-size: 15px;
  margin: 0 0 18px;
}

.badges-group {
  margin-bottom: 26px;
}

.badges-group-title {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--navy);
}

.badges-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.badge-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  background: var(--white);
}

.badge-tile--earned {
  border-color: var(--gold-light, #d9b95c);
  background: rgba(201, 168, 76, 0.08);
}

.badge-tile--locked {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.badge-tile-icon {
  font-size: 30px;
  line-height: 1.2;
}

.badge-medal {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 0 4px;
}

.badge-medal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.badge-medal-ring {
  fill: #e8eef6;
  stroke: #c5d0de;
  stroke-width: 2;
}

.badge-medal-face {
  fill: #f7fafc;
}

.badge-medal--earned .badge-medal-ring {
  fill: #1a3a6b;
  stroke: #c9a84c;
  stroke-width: 3;
}

.badge-medal--earned .badge-medal-face {
  fill: #0f2848;
}

.badge-medal path,
.badge-medal circle:not(.badge-medal-ring):not(.badge-medal-face) {
  fill: #8a9bb0;
  stroke: none;
}

.badge-medal--earned path,
.badge-medal--earned circle:not(.badge-medal-ring):not(.badge-medal-face) {
  fill: #e8c96b;
}

.badge-medal-num {
  fill: #8a9bb0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
}

.badge-medal-num--sm {
  font-size: 16px;
}

.badge-medal--earned .badge-medal-num {
  fill: #f3e3a8;
}

.badge-tile--locked .badge-medal {
  opacity: 0.85;
}

.badge-tile-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
}

.badge-tile-desc {
  font-size: 11px;
  color: var(--muted, #6b7280);
}

.badge-tile-date {
  font-size: 10px;
}

.badge-tile-coin {
  font-size: 11px;
  font-weight: 600;
  color: #b5872a;
}

/* Compact grid used inline on the Portfolio page. */
.badges-grid-wrap--compact .badges-group {
  margin-bottom: 14px;
}

.badges-grid-wrap--compact .badges-tiles {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.badges-grid-wrap--compact .badge-tile {
  padding: 10px 8px;
}

.badges-grid-wrap--compact .badge-tile-icon {
  font-size: 22px;
}

.badges-grid-wrap--compact .badge-medal {
  width: 40px;
  height: 40px;
}

.badges-grid-wrap--compact .badge-tile-name {
  font-size: 11px;
}

@media (max-width: 480px) {
  .badges-tiles {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}