/* Shared zone-info label styles used by both solo and VS modes. */

.solo-zone-info, .vs-zone-info {
  position: absolute;
  top: 3px;
  left: 4px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 1px 5px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-radius: 3px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.solo-zone-label, .vs-zone-label { color: var(--text-dim); font-size: 0.62rem; white-space: nowrap; }
.solo-zone-count, .vs-zone-count { color: var(--text); font-size: 0.78rem; font-weight: bold; white-space: nowrap; }

@media (max-width: 767px) {
  .solo-zone-label, .vs-zone-label { font-size: 0.55rem; }
  .solo-zone-count, .vs-zone-count { font-size: 0.65rem; }
}