.brand-space {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  width: 100%;
}
.brand-space .brand {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  text-align: left;
  overflow-wrap: anywhere;
  transition: color .25s, text-shadow .25s;
}
.brand-count,
.brand-cooldown {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
  pointer-events: none;
}
.brand-count {
  color: #627f91;
  opacity: .43;
  text-shadow: 0 2px 6px rgba(113, 147, 165, .2);
}
.brand-cooldown { color: #8d7d79; opacity: .7; }
.brand[aria-disabled="true"] { cursor: wait; }
.brand.is-celebrating { color: #806e92; text-shadow: 0 2px 16px rgba(155, 132, 177, .2); }
.brand.is-legendary { color: #8b7151; }
@media (max-width: 800px) {
  .brand-space { gap: 7px; }
  .brand-count, .brand-cooldown { font-size: 9px; letter-spacing: 0; }
}
@media (max-width: 600px) {
  .brand-space { gap: 9px; }
  .brand-count, .brand-cooldown { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-space .brand { transition: none; }
}