.turn-banner.my-turn,
.turn-banner.other-turn {
  justify-content: center;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  padding: 8px 12px 10px;
}

.turn-banner.my-turn { color: var(--player); }
.turn-banner.other-turn { color: var(--muted); }
.turn-status { display: inline-flex; align-items: center; gap: 8px; }

.turn-banner.my-turn .turn-status {
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 1.6px;
  animation: turn-arrive .45s ease-out both;
}

.turn-banner.my-turn .turn-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--player);
}

@keyframes turn-arrive {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .turn-banner.my-turn .turn-status { animation: none; }
}