.overall-records-page,
.league-records-page {
  width: 100%;
}

.history-page-kicker {
  color: var(--tlfl-blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.history-page-kicker + h1 {
  margin-top: 0;
}

.league-records-status {
  color: #334155;
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0.55rem 0 0;
}

.league-records-lede {
  color: #475569;
  font-size: 1rem;
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 42rem;
}

.league-records-photo-frame {
  background: #111827;
  border: 1px solid rgb(15 23 42 / 0.14);
  border-radius: 8px;
  box-shadow: 0 0.75rem 1.5rem rgb(15 23 42 / 0.16);
  margin: 1.25rem 0 0;
  max-width: 22rem;
  overflow: hidden;
}

.league-records-photo {
  display: block;
  height: auto;
  width: 100%;
}

.overall-records-table-wrap {
  background: #ffffff;
  border: 1px solid var(--tlfl-table-border);
  border-radius: 8px;
  box-shadow: 0 0.6rem 1.3rem rgb(15 23 42 / 0.08);
  max-width: 68rem;
  overflow-x: auto;
  width: 100%;
}

.overall-records-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 42rem;
  table-layout: fixed;
  width: 100%;
}

.overall-records-table th,
.overall-records-table td {
  border-bottom: 1px solid var(--tlfl-table-border);
  padding: 0.82rem 0.9rem;
  text-align: left;
  vertical-align: middle;
}

.overall-records-table th {
  background: var(--tlfl-table-header-bg);
  color: var(--tlfl-table-header-text);
  font-weight: 900;
}

.overall-records-table tbody tr:nth-child(even) {
  background: var(--tlfl-table-row-alt);
}

.overall-records-table tbody tr:last-child td {
  border-bottom: 0;
}

.overall-records-table th:first-child,
.overall-records-table td:first-child {
  text-align: center;
  width: 5.2rem;
}

.overall-records-table th:nth-child(2),
.overall-records-table td:nth-child(2) {
  width: 40%;
}

.overall-records-table th:nth-child(n + 3),
.overall-records-table td:nth-child(n + 3) {
  text-align: center;
}

.overall-records-table td:first-child {
  color: #475569;
  font-weight: 900;
}

.overall-records-table td:nth-child(2) {
  font-weight: 800;
}

.overall-records-table-sorted-team tbody td:nth-child(2),
.overall-records-table-sorted-wins tbody td:nth-child(3),
.overall-records-table-sorted-losses tbody td:nth-child(4),
.overall-records-table-sorted-ties tbody td:nth-child(5),
.overall-records-table-sorted-win_pct tbody td:nth-child(6) {
  background: rgb(37 99 235 / 0.07);
  font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
  .overall-records-table tbody tr:hover {
    background: rgb(226 232 240 / 0.55);
  }

  .overall-records-table-sorted-team tbody tr:hover td:nth-child(2),
  .overall-records-table-sorted-wins tbody tr:hover td:nth-child(3),
  .overall-records-table-sorted-losses tbody tr:hover td:nth-child(4),
  .overall-records-table-sorted-ties tbody tr:hover td:nth-child(5),
  .overall-records-table-sorted-win_pct tbody tr:hover td:nth-child(6) {
    background: rgb(37 99 235 / 0.13);
  }
}

.overall-records-header-label-mobile,
.overall-records-team-name-mobile {
  display: none;
}

.overall-records-team-link {
  align-items: center;
  color: var(--tlfl-blue);
  display: inline-flex;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
}

.overall-records-team-link:visited {
  color: var(--tlfl-blue);
}

.overall-records-team-link:hover,
.overall-records-team-link:focus {
  color: var(--tlfl-blue-dark);
}

.overall-records-team-link span {
  overflow-wrap: anywhere;
}

.overall-records-team-logo {
  flex: 0 0 auto;
  height: 2.125rem;
  object-fit: contain;
  width: 2.125rem;
}

.overall-records-team-link-muted {
  color: inherit;
}

.overall-records-sort-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.35rem;
  justify-content: flex-start;
  line-height: 1;
  text-decoration: none;
  width: 100%;
}

.overall-records-sort-link:hover,
.overall-records-sort-link:focus {
  color: inherit;
}

.overall-records-sort-link::after {
  border-left: 0.26rem solid transparent;
  border-right: 0.26rem solid transparent;
  content: "";
  display: none;
}

.overall-records-table th[aria-sort="ascending"] .overall-records-sort-link::after {
  border-bottom: 0.4rem solid currentColor;
  display: inline-block;
}

.overall-records-table th[aria-sort="descending"] .overall-records-sort-link::after {
  border-top: 0.4rem solid currentColor;
  display: inline-block;
}

.overall-records-table th:nth-child(n + 3) .overall-records-sort-link {
  justify-content: center;
}

.overall-records-table th:nth-child(2) .overall-records-sort-link {
  justify-content: flex-start;
}

.overall-records-table th:first-child .overall-records-sort-link {
  justify-content: center;
}

.super-bowl-champions-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}

.super-bowl-champions-table th,
.super-bowl-champions-table td {
  border-bottom: 1px solid var(--tlfl-table-border);
  padding: 0.75rem;
  text-align: left;
  vertical-align: middle;
}

.super-bowl-champions-table th {
  background: var(--tlfl-table-header-bg);
  color: var(--tlfl-table-header-text);
  font-weight: 900;
}

.super-bowl-champions-table tbody tr:nth-child(even) {
  background: var(--tlfl-table-row-alt);
}

.super-bowl-champions-table tbody tr:last-child td {
  border-bottom: 0;
}

.super-bowl-champions-table th:first-child,
.super-bowl-champions-table td:first-child {
  width: 7rem;
}

.super-bowl-champions-table th:nth-child(2),
.super-bowl-champions-table td:nth-child(2) {
  width: 20rem;
}

.super-bowl-champions-table td:nth-child(-n + 2) {
  font-size: 1.28rem;
}

.super-bowl-champions-table td:first-child {
  font-size: 1.8rem;
}

.super-bowl-champion-details {
  display: grid;
  gap: 0.25rem;
}

.super-bowl-champion-team {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  font-weight: 800;
}

.super-bowl-champion-owners {
  color: #374151;
  font-size: 1.12rem;
  line-height: 1.25;
}

.super-bowl-banner-list {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.super-bowl-banner-frame {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgb(255 255 255 / 0.12), transparent 12%, transparent 88%, rgb(0 0 0 / 0.2)),
    var(--banner-secondary-color);
  box-sizing: content-box;
  clip-path: polygon(0.75% 1%, 49% 1.6%, 99.25% 1%, 99.25% 86.5%, 50% 100%, 0.75% 86.5%);
  filter:
    drop-shadow(0 0.08rem 0.06rem rgb(255 255 255 / 0.18))
    drop-shadow(0 0.5rem 0.5rem rgb(17 24 39 / 0.38));
  flex: 0 0 auto;
  height: 12.75rem;
  isolation: isolate;
  padding: 0.44rem;
  position: relative;
  width: 8.4rem;
}

.super-bowl-banner-frame::after {
  background:
    radial-gradient(ellipse at 50% 0, rgb(255 255 255 / 0.22), transparent 52%),
    linear-gradient(105deg, transparent 0 45%, rgb(255 255 255 / 0.08) 49%, transparent 54%),
    linear-gradient(90deg, rgb(0 0 0 / 0.13), transparent 7%, transparent 93%, rgb(0 0 0 / 0.2));
  clip-path: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.super-bowl-banner-frame-white-trim {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 3px),
    var(--banner-primary-color);
}

.super-bowl-banner-frame-white-trim::before {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.28) 0 1px, transparent 1px 3px),
    var(--banner-secondary-color);
  clip-path: inherit;
  content: "";
  inset: 2px;
  position: absolute;
  z-index: 0;
}

.super-bowl-banner {
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 1%, rgb(255 255 255 / 0.2), transparent 28%),
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 0.09) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 72% 68%, rgb(0 0 0 / 0.11) 0 0.8px, transparent 1.2px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgb(0 0 0 / 0.14), transparent 6%, transparent 48%, rgb(255 255 255 / 0.05) 52%, transparent 94%, rgb(0 0 0 / 0.18)),
    linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 12%, transparent 74%, rgb(0 0 0 / 0.14)),
    var(--banner-primary-color);
  background-size: auto, 7px 7px, 9px 9px, auto, auto, auto, auto, auto;
  box-sizing: border-box;
  clip-path: polygon(0.75% 1%, 49% 1.6%, 99.25% 1%, 99.25% 86.5%, 50% 100%, 0.75% 86.5%);
  color: var(--banner-text-color);
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  padding: 0.65rem 0.55rem 0.8rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

.super-bowl-banner-team {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 0.35rem;
  min-height: 1.45rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  text-shadow:
    0 -1px 0 rgb(255 255 255 / 0.2),
    0 1px 0 rgb(0 0 0 / 0.48),
    0 0.12rem 0.12rem rgb(0 0 0 / 0.34);
  transform: translate(var(--banner-word-art-offset-x, 0), var(--banner-word-art-offset-y, 0));
  white-space: nowrap;
}

.super-bowl-banner-team-long {
  font-size: 1.15rem;
}

.super-bowl-banner-word-art {
  align-items: center;
  display: flex;
  height: 1.45rem;
  justify-content: center;
  margin-bottom: 0.35rem;
  max-width: 100%;
  transform: translate(var(--banner-word-art-offset-x, 0), var(--banner-word-art-offset-y, 0));
  width: 100%;
}

.super-bowl-banner-word-art img {
  filter:
    drop-shadow(0 -1px 0 rgb(255 255 255 / 0.2))
    drop-shadow(0 0.12rem 0.1rem rgb(0 0 0 / 0.5));
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: scale(var(--banner-word-art-scale, 1));
}

.super-bowl-banner-logo {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  height: 4.25rem;
  justify-content: center;
  margin-bottom: 0.35rem;
  transform: translate(var(--banner-logo-offset-x, 0), var(--banner-logo-offset-y, 0));
  width: 5.4rem;
}

.super-bowl-banner-logo img {
  filter:
    drop-shadow(0 -1px 0 rgb(255 255 255 / 0.22))
    drop-shadow(0 0.16rem 0.12rem rgb(0 0 0 / 0.48));
  height: 4.25rem;
  object-fit: contain;
  transform: scale(var(--banner-logo-scale, 1));
  width: 5.4rem;
}

.super-bowl-banner-logo-secondary-stroke img {
  filter:
    drop-shadow(0 0 1px var(--banner-secondary-color))
    drop-shadow(0 0 1px var(--banner-secondary-color))
    drop-shadow(0 0 2px var(--banner-secondary-color))
    drop-shadow(0 -1px 0 rgb(255 255 255 / 0.22))
    drop-shadow(0 0.16rem 0.12rem rgb(0 0 0 / 0.48));
}

.super-bowl-banner-title-year {
  transform: translate(var(--banner-title-year-offset-x, 0), var(--banner-title-year-offset-y, 0));
  width: 100%;
}

.super-bowl-banner-title {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 0.35rem;
  text-shadow:
    0 -1px 0 rgb(255 255 255 / 0.18),
    0 1px 0 rgb(0 0 0 / 0.45),
    0 0.1rem 0.1rem rgb(0 0 0 / 0.3);
}

.super-bowl-banner-year {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0;
  text-shadow:
    0 -1px 0 rgb(255 255 255 / 0.2),
    0 1px 0 rgb(0 0 0 / 0.48),
    0 0.12rem 0.12rem rgb(0 0 0 / 0.34);
}

.super-bowl-banner-tlfl-logo {
  filter:
    drop-shadow(0 -1px 0 rgb(255 255 255 / 0.2))
    drop-shadow(0 0.1rem 0.09rem rgb(0 0 0 / 0.48));
  height: 1.35rem;
  margin-top: auto;
  object-fit: contain;
  transform: translate(var(--banner-tlfl-logo-offset-x, 0), var(--banner-tlfl-logo-offset-y, 0));
  width: 1.85rem;
}
