.boxscore {
  margin-top: 2rem;
}

.boxscore__title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.boxscore__periods,
.boxscore__team {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.boxscore__periods td,
.boxscore__periods th,
.boxscore__team th,
.boxscore__team td {
  padding: 0.4rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid #e2e2e2;
}

/* Team names in the period table are row headers: keep them left aligned
   and visually the same weight as the other cells. */
.boxscore__periods tbody th {
  text-align: left;
  font-weight: 400;
}

.boxscore__periods tr,
.boxscore__team tr {
  border-left: 4px solid transparent;
}

.boxscore__periods tr[style],
.boxscore__team[style] caption,
.boxscore__team[style] {
  border-left-color: var(--team-color, transparent);
}

/* Bootstrap sets caption-side: bottom on every table caption, so the team
   name has to be pinned to the top here. Text color is reset because
   Bootstrap's muted gray caption color is low contrast on the tinted
   background. */
.boxscore__team caption,
.boxscore__periods caption {
  caption-side: top;
}

.boxscore__team caption {
    text-align: left;
    font-weight: 700;
    color: #000;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid #F05324;
    font-size: 1.25rem;
}

/* Visually hidden but available to screen readers. Used for the period table
   caption. Many themes already define this class, this is a fallback. */
.boxscore .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Player column: left aligned header and cells. The selector is specific
   enough to beat the centered default for table cells above. */
.boxscore__team th.boxscore__name-col,
.boxscore__team td.boxscore__name-col {
  text-align: left;
}

.boxscore__player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.boxscore__photo {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Keeps names lined up for players without a photo. */
.boxscore__photo--empty {
  background: transparent;
}

.boxscore__totals-row {
  font-weight: 700;
  border-top: 2px solid #333;
}

.boxscore__team th,
.boxscore__team td,
.boxscore__periods th,
.boxscore__periods td {
  white-space: nowrap;
}

.boxscore .table-responsive:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}