.achievement-badge img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.achievement-state {
  text-align: right;
}

.psn-trophy-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 2px 0 18px;
}

.trophy-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ececf1;
  border-radius: 10px;
  font-size: 10px;
}

.trophy-chip b {
  font-size: 10px;
}

.trophy-chip span {
  font-weight: 700;
}

.trophy-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 10px;
}

.trophy-bronze { --trophy-color: #a96c42; --trophy-bg: #f8eee8; }
.trophy-silver { --trophy-color: #7d8793; --trophy-bg: #f0f2f5; }
.trophy-gold { --trophy-color: #bb841a; --trophy-bg: #fff5d8; }
.trophy-platinum { --trophy-color: #5579a5; --trophy-bg: #eaf3ff; }
.trophy-achievement { --trophy-color: #6f7080; --trophy-bg: #f1f1f5; }

.trophy-chip,
.trophy-group-heading {
  color: var(--trophy-color);
  background: var(--trophy-bg);
}

.achievement-item[class*="trophy-"] .achievement-badge,
.achievement-item[class*="trophy-"].unlocked .achievement-badge {
  color: var(--trophy-color);
  background: var(--trophy-bg);
  border: 1px solid color-mix(in srgb, var(--trophy-color) 25%, transparent);
}

@media (max-width: 520px) {
  .psn-trophy-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}