.player-name {
  color: var(--player-name-start, #1d4ed8);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 10px rgb(37 99 235 / 14%);
  text-decoration: underline;
  text-decoration-color: rgb(99 102 241 / 24%);
  text-underline-offset: 4px;
}
@supports (background-clip: text) {
  .player-name {
    background: linear-gradient(110deg, var(--player-name-start, #1d4ed8) 0%, var(--player-name-mid, #6d28d9) 48%, var(--player-name-end, #0f766e) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.player-name:hover { text-decoration-color: #6366f1; }
@media (forced-colors: active) {
  .player-name { background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
}
@media print {
  .player-name { background: none; -webkit-text-fill-color: currentColor; text-shadow: none; }
}

.player-name--on-dark { --player-name-start: #93c5fd; --player-name-mid: #c4b5fd; --player-name-end: #67e8f9; }