.highlights.section { padding-block: 48px; background: #f4f7fc; }
.highlights .section-head { align-items: end; margin-bottom: 18px; gap: 12px; }
.highlights .section-head h2 { font-size: clamp(28px, 5vw, 46px); }
.highlight-controls { display: flex; gap: 7px; }
.highlight-controls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d1d9e8;
  border-radius: 50%;
  background: #fff;
  color: #16356a;
  cursor: pointer;
}
.highlight-controls button:disabled { opacity: .38; cursor: default; }
.highlights .highlight-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(158px, 17vw, 225px);
  grid-template-columns: none;
  gap: 14px;
  overflow-x: auto;
  padding: 3px 3px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.highlights .highlight-card {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  scroll-snap-align: start;
  border: 0;
  background: #0d2045;
  color: #fff;
  isolation: isolate;
}
.highlights .highlight-cover { position: absolute; inset: 0; aspect-ratio: auto; }
.highlights .highlight-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #07112630 2%, transparent 40%, #050a17 100%);
}
.highlights .highlight-tag { z-index: 2; background: #204dc4; border-radius: 999px; font-weight: 750; }
.highlights .highlight-play { z-index: 2; border: 1px solid #ffffff75; }
.highlights .highlight-copy { position: absolute; z-index: 3; inset: auto 0 0; padding: 14px; line-height: 1.3; }
.highlights .highlight-copy small { color: #dfebff; }
.highlights .highlight-card:hover .highlight-play { background: #214ec2; }
.highlights .highlight-grid.has-video { grid-auto-columns: clamp(216px, 23vw, 256px); align-items: start; }
.highlights .highlight-video-card {
  aspect-ratio: auto;
  cursor: default;
  background: #fff;
  color: #0b214a;
  border: 1px solid #d1d9e8;
}
.highlight-video-label {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 750;
}
.highlight-video { aspect-ratio: 9 / 16; background: #0b1731; }
.highlight-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.highlight-video-info { display: grid; gap: 5px; padding: 9px 12px; overflow-wrap: anywhere; }
.highlight-video-info a { width: fit-content; color: #2356ab; font-size: 12px; font-weight: 750; }

.player-artwork { position: relative; display: grid; place-items: center; overflow: hidden; background: #e9eff9; }
.player-artwork .player-artwork-crest { width: 50%; height: 58%; object-fit: contain; }
.player-artwork .player-artwork-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #e9eff9; }
.team-player-list .profile-trigger {
  text-align: left;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #dce5f2;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.team-player-list .profile-trigger:hover { background: #edf4ff; }
.profile-trigger small { display: block; color: #2452a7; margin-top: 3px; }

.top-scorers .section-head { align-items: end; margin-bottom: 18px; gap: 12px; }
.scorer-controls { display: flex; gap: 7px; }
.scorer-controls button {
  width: 42px;
  height: 42px;
  border: 1px solid #c9d6eb;
  border-radius: 50%;
  background: #fff;
  color: #16356a;
  cursor: pointer;
}
.scorer-controls button:disabled { opacity: .38; cursor: default; }
#scorer-track {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 4px 4px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
}
.scorer-grid .scorer-profile {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(160px, 18.5%, 216px);
  min-width: 0;
  border: 0;
  padding: 0;
  text-align: left;
  color: white;
  cursor: pointer;
  scroll-snap-align: start;
}
.scorer-grid .scorer-profile[hidden] { display: none; }
.scorer-grid .scorer-profile.is-leader {
  flex-basis: clamp(200px, 23%, 264px);
  border: 2px solid #ffc94f;
  background: linear-gradient(155deg, #1c3978, #081b42 75%);
}
.is-leader .scorer-rank {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffd363;
  color: #201900;
}
.scorer-profile .scorer-artwork { width: 100%; height: clamp(192px, 25vw, 285px); }
.scorer-profile .scorer-copy { display: grid; gap: 6px; align-content: start; flex: 1; width: 100%; }
.scorer-name { font-size: clamp(16px, 2vw, 22px); line-height: 1.25; }
.scorer-school { color: #c6d8f5; font-size: 13px; line-height: 1.4; }
.scorer-profile .scorer-goals { margin-top: 6px; padding-top: 10px; }
.scorer-profile .scorer-goals strong { font-size: clamp(34px, 5vw, 56px); }
.scorer-link { color: #e2edff; font-size: 12px; }
.scorer-profile:hover .scorer-link { text-decoration: underline; }
.scorer-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.scorer-footer p { margin: 0; color: #455876; font-size: 13px; }
#scorer-more {
  min-height: 42px;
  border: 1px solid #153d8c;
  border-radius: 9px;
  padding: 9px 16px;
  background: #153d8c;
  color: #fff;
  font-weight: 750;
  cursor: pointer;
}
#scorer-more:hover { background: #0c2967; }

.player-profile-dialog {
  width: min(94vw, 720px);
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: #0b214a;
  background: #fff;
  overflow: auto;
}
.player-profile-dialog::backdrop { background: #06142bbb; }
.profile-close {
  position: absolute;
  z-index: 1;
  top: 13px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff68;
  border-radius: 50%;
  background: #122759;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.profile-header {
  display: grid;
  grid-template-columns: minmax(85px, 150px) minmax(0, 1fr);
  gap: clamp(14px, 4vw, 30px);
  align-items: center;
  padding: 28px 58px 28px 26px;
  background: linear-gradient(120deg, #234edb, #101c48 78%);
  color: #fff;
}
.profile-artwork { aspect-ratio: 4 / 5; border-radius: 12px; border: 1px solid #ffffff62; }
.profile-heading > span { color: #b9cdfb; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.profile-heading h2 { font-size: clamp(20px, 4vw, 38px); line-height: 1.2; margin: 7px 0; overflow-wrap: anywhere; }
.profile-heading p { display: flex; gap: 7px; align-items: center; margin: 5px 0; color: #e0e9ff; font-size: 14px; }
.profile-heading p img { width: 26px; height: 26px; object-fit: contain; background: white; border-radius: 5px; }
.profile-number { color: #ffdc62; font-size: 27px; }
.profile-body { padding: 24px; }
.profile-body h3 { margin: 0 0 14px; font-size: 20px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.profile-stat { text-align: center; padding: 15px 5px; background: #edf3ff; border-radius: 12px; color: #163b9f; }
.profile-stat.yellow { background: #fff3cd; color: #805100; }
.profile-stat.red { background: #ffedf0; color: #9e213a; }
.profile-stat dt { font-size: 13px; font-weight: 750; }
.profile-stat dd { margin: 2px 0 0; font-size: clamp(27px, 7vw, 47px); line-height: 1; font-weight: 900; }
.profile-body p { margin: 14px 0 0; color: #5a6881; font-size: 12px; }
@media (max-width: 540px) {
  .highlights .highlight-grid { grid-auto-columns: clamp(140px, 42vw, 186px); }
  .highlights .highlight-grid.has-video { grid-auto-columns: min(68vw, 252px); }
  .scorer-grid .scorer-profile { flex-basis: clamp(148px, 50vw, 184px); }
  .scorer-grid .scorer-profile.is-leader { flex-basis: clamp(182px, 61vw, 228px); }
  .scorer-profile .scorer-artwork { height: clamp(196px, 62vw, 254px); }
  .scorer-controls button { width: 38px; height: 38px; }
  .profile-header { grid-template-columns: 78px minmax(0, 1fr); padding: 19px 49px 19px 14px; }
  .profile-heading p { font-size: 12px; }
  .profile-body { padding: 17px; }
  .profile-close { width: 34px; height: 34px; }
}