.timeql-public-achievements {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.timeql-public-achievement {
  align-items: center;
  border: 1px solid rgba(185, 139, 45, 0.48);
  border-radius: 0.9rem;
  display: inline-flex;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.52rem 0.78rem;
}

.timeql-public-achievement--unique {
  background: linear-gradient(135deg, rgba(211, 169, 73, 0.15), rgba(126, 87, 194, 0.1));
}

.timeql-public-achievement--awakened {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(135deg, rgba(211, 169, 73, 0.28), rgba(86, 64, 135, 0.2));
  border-color: rgba(211, 169, 73, 0.8);
  box-shadow: 0 0.35rem 1.2rem rgba(110, 78, 25, 0.12);
}

.timeql-public-achievements--awakening-preview {
  align-items: center;
  gap: 8px;
}

.timeql-public-achievements--awakening-preview .timeql-public-achievement {
  border-radius: 999px;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.timeql-public-achievement--sage {
  background: linear-gradient(135deg, rgba(255, 246, 215, 0.96), rgba(238, 226, 255, 0.92));
  border-color: rgba(181, 128, 28, 0.38);
  box-shadow: 0 5px 16px rgba(134, 93, 20, 0.08);
  color: #6e4a0c;
}

.timeql-public-achievement--count {
  background: linear-gradient(135deg, rgba(238, 237, 254, 0.98), rgba(231, 226, 255, 0.94));
  border-color: rgba(79, 70, 229, 0.28);
  box-shadow: 0 5px 16px rgba(67, 56, 168, 0.07);
  color: #4338a8;
}

.timeql-public-achievement__icon {
  display: inline-flex;
  flex: none;
}

.timeql-public-achievement__name {
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.05em;
}

.timeql-public-achievement__count {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.76;
}

.timeql-public-achievements--awakening-preview .timeql-public-achievement__name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.timeql-public-achievements--awakening-preview .timeql-public-achievement__count {
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0.82;
}

html[data-tqc-theme="dark"] .timeql-public-achievement--sage {
  background: linear-gradient(135deg, rgba(101, 74, 23, 0.56), rgba(80, 61, 118, 0.58));
  border-color: rgba(238, 193, 92, 0.46);
  color: #ffe1a1;
}

html[data-tqc-theme="dark"] .timeql-public-achievement--count {
  background: linear-gradient(135deg, rgba(61, 55, 137, 0.7), rgba(78, 61, 127, 0.62));
  border-color: rgba(151, 139, 255, 0.42);
  color: #ded9ff;
}