/* Game Detail */
     .game-detail .game-hero {
        background: linear-gradient(180deg, var(--black), var(--grey-900));
        color: var(--white); border-radius: 12px; padding: 18px;
        border: 1px solid var(--grey-700); margin-bottom: 14px;
      }
      .game-detail .pill {
        display: inline-block; background: var(--yellow); color: var(--black);
        font-weight: 800; padding: 4px 10px; border-radius: 999px;
      }
      .game-detail .matchup { margin: 10px 0 4px; }
      .game-detail .sub { opacity: .85; }
      .game-detail .game-cards {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0 20px;
      }



.player-name {
  font-weight: 570;
}

.player-name:hover a,
.player-link-card:hover {
  color: #404040;   /* light gray */
}


/* Header sorting design */
.calendar-card table.table.sortable th {
  cursor: pointer !important;
  position: relative;
  user-select: none;
  padding-right: 18px;
  transition: color 0.2s ease, background-color 0.2s ease;
}


.calendar-card table.table.sortable th:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--invert-black);
}


.calendar-card table.table.sortable th::after {
  content: "↕";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}


.calendar-card table.table.sortable th[data-dir="asc"]::after {
  content: "▲";
  opacity: 0.9;
}


.calendar-card table.table.sortable th[data-dir="desc"]::after {
  content: "▼";
  opacity: 0.9;
}

.player-link-card {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 8px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,0.06);
  color: inherit;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.player-link-card:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}