.player-name {
  font-weight: var(--font-weight-semibold);
  opacity: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  transition: text-shadow var(--transition-base), color var(--transition-base);
  max-width: 100%;
  font-size: clamp(0.1em, min(1.9vh, 3.5vw), 1.3em);

  & > .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    font-size: 1em;
  }

  & > .dealerpill {
    background: var(--color-accent-alpha-30);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-2xl);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    padding: 0.1em 0.3em;
    font-size: 0.8em;
  }

  &.-active {
    color: var(--color-accent);
  }

  &.-left,
  &.-right {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    flex-shrink: 0;
    max-width: none;
    max-height: 100%;
    font-size: clamp(0.1em, 4.1vw, 1.3em);
    justify-content: end;

    & > .name {
      max-width: none;
      max-height: 100%;
    }

    & > .dealerpill {
    padding: 0.3em 0.1em;
    }
  }

  &.-right {
    transform: rotate(0deg);
  }

  &.-top,
  &.-bottom {
    gap: var(--space-4);
  }
}