.games-page { background: #050f1e; }
.games-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .055; background-image: linear-gradient(rgba(243,245,247,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(243,245,247,.3) 1px, transparent 1px); background-size: 56px 56px; }
.games-notice { background: #b9202b; }
.header-back { justify-self: end; color: var(--cyan); font-size: 24px; text-decoration: none; }
.games-breadcrumbs { max-width: 1500px; margin: auto; padding: 22px 5vw 0; display: flex; justify-content: flex-start; gap: 9px; color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.games-breadcrumbs a { padding: 0; color: var(--white); }
.games-breadcrumbs a::after { display: none; }

.games-hero { max-width: 1500px; min-height: 690px; margin: auto; padding: 74px 5vw 90px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .55fr); gap: 7vw; align-items: center; }
.games-hero__copy { position: relative; }
.games-hero__copy::before { content: "01"; position: absolute; top: -38px; right: 2%; color: rgba(243,245,247,.035); font: 900 clamp(170px, 24vw, 330px)/.7 var(--display); z-index: -1; }
.games-hero h1 { margin: 0; font: 900 clamp(68px, 7.6vw, 122px)/.78 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.games-hero h1 em, .matchup-lab h2 em { color: var(--red); font-style: normal; }
.games-hero__copy > p:last-of-type { max-width: 760px; margin: 34px 0; color: #c4cfdd; font-size: 17px; line-height: 1.67; }
.games-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.week-board { min-height: 510px; padding: 24px; display: flex; flex-direction: column; border: 1px solid rgba(33,212,253,.26); background: linear-gradient(145deg, rgba(13,39,72,.96), rgba(6,20,39,.98)); box-shadow: 16px 16px 0 rgba(224,68,74,.1); }
.week-board > header { display: flex; justify-content: space-between; gap: 14px; color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.week-board > header span { white-space: nowrap; }
.week-board > header i, .matchup-console header i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(33,212,253,.1); }
.week-board > header time { color: var(--steel); text-align: right; }
.week-board__number { margin: auto 0; display: grid; grid-template-columns: auto 1fr; align-items: end; }
.week-board__number small { grid-column: 1 / -1; color: var(--steel); font-size: 8px; font-weight: 900; letter-spacing: .26em; }
.week-board__number strong { color: var(--white); font: 900 clamp(130px, 14vw, 210px)/.73 var(--display); letter-spacing: -.07em; }
.week-board__number span { padding: 0 0 14px 14px; color: var(--red); font: 900 11px var(--display); letter-spacing: .16em; writing-mode: vertical-rl; }
.week-board dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--rule); }
.week-board dl div { padding: 16px 7px; border-right: 1px solid var(--rule); }
.week-board dl div:last-child { border: 0; }
.week-board dt { font: 900 28px var(--display); }
.week-board dd { margin: 2px 0 0; color: var(--steel); font-size: 8px; text-transform: uppercase; }
.week-board > p { margin: 18px 0 0; color: var(--steel); font-size: 9px; line-height: 1.5; }

.featured-game { min-height: 255px; display: grid; grid-template-columns: 210px minmax(0, 1fr); background: var(--white); color: var(--navy); border-top: 8px solid var(--red); }
.featured-game__label { padding: 34px 5vw; display: flex; flex-direction: column; border-right: 1px solid #ced5de; }
.featured-game__label span { color: var(--red); font: 900 58px/1 var(--display); }
.featured-game__label b { margin-top: auto; font-size: 8px; letter-spacing: .14em; writing-mode: vertical-rl; transform: rotate(180deg); }
.featured-game > article { max-width: 1160px; width: 100%; padding: 38px 5vw; align-self: center; }
.featured-matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.featured-matchup .team-token { display: flex; gap: 16px; align-items: baseline; }
.featured-matchup .team-token strong { color: var(--navy); font: 900 clamp(50px, 6vw, 78px)/1 var(--display); }
.featured-matchup .team-token span { color: #617087; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.featured-matchup > b { color: var(--red); font: 900 16px var(--display); }
.featured-matchup .featured-clock { min-width: 200px; padding-left: 26px; border-left: 1px solid #ced5de; }
.featured-clock time { display: block; color: var(--navy); font: 900 22px var(--display); }
.featured-clock small { color: #68768a; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.featured-game article > footer { margin-top: 20px; padding: 18px 0 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #d7dde5; color: #617087; }
.featured-game article > footer p { margin: 0; font-size: 12px; }
.featured-game article > footer a { color: var(--navy); font-size: 9px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; }
.featured-game > *, .featured-matchup > *, .featured-matchup .team-token > *, .featured-clock, .game-toolbar > * { min-width: 0; }
.featured-matchup .team-token span, .featured-clock small, .featured-game article > footer p { overflow-wrap: anywhere; }

.schedule-section { padding: 96px 5vw; background: #061427; }
.games-heading { max-width: 1500px; margin: 0 auto 36px; display: flex; justify-content: space-between; gap: 36px; align-items: end; }
.games-heading h2 { margin: 0; font: 900 clamp(46px, 5vw, 76px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.03em; }
.games-heading > p { max-width: 390px; margin: 0; color: var(--steel); font-size: 12px; line-height: 1.55; }
.game-toolbar { max-width: 1500px; margin: 0 auto 42px; padding: 18px; display: grid; grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(135px, .55fr)) auto; gap: 12px; align-items: end; background: var(--blue); border: 1px solid var(--rule); }
.game-toolbar label { color: var(--steel); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.game-toolbar input, .game-toolbar select { width: 100%; height: 42px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--rule); background: #061427; color: var(--white); }
.game-toolbar input:focus, .game-toolbar select:focus { border-color: var(--cyan); outline: 0; }
.game-toolbar output { min-width: 100px; padding: 13px 8px; color: var(--cyan); font: 900 10px var(--display); text-align: center; letter-spacing: .08em; }
.schedule-groups { max-width: 1500px; margin: auto; display: grid; gap: 46px; }
.day-group > header { margin-bottom: 14px; display: flex; gap: 18px; align-items: baseline; }
.day-group > header h3 { margin: 0; font: 900 29px var(--display); text-transform: uppercase; }
.day-group > header span { color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.game-card { min-width: 0; padding: 26px; display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 24px; background: var(--navy); text-decoration: none; transition: background .18s ease, transform .18s ease; }
.game-card:hover { background: var(--blue); transform: translateY(-2px); }
.game-card__clock { padding-right: 20px; border-right: 1px solid var(--rule); }
.game-card__clock time { display: block; color: var(--white); font: 900 25px/1 var(--display); }
.game-card__clock span { display: block; margin-top: 6px; color: var(--cyan); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.game-card__clock small { display: block; margin-top: 17px; color: var(--steel); font-size: 8px; }
.game-card__matchup { min-width: 0; }
.game-card__matchup > div { display: flex; align-items: baseline; gap: 11px; }
.game-card__matchup strong { min-width: 55px; font: 900 36px/1 var(--display); }
.game-card__matchup b { color: var(--steel); font-size: 9px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-card__matchup > span { display: block; margin: 5px 0; color: var(--red); font: 900 8px var(--display); }
.game-card__matchup p { margin: 17px 0 0; color: #aebbd0; font-size: 11px; line-height: 1.45; }
.game-card__matchup small { display: block; margin-top: 14px; color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .12em; }

.games-state { max-width: 1500px; min-height: 260px; margin: auto; display: grid; place-content: center; justify-items: center; text-align: center; border: 1px solid var(--rule); color: var(--steel); }
.games-state > span { width: 34px; height: 34px; border: 3px solid var(--rule); border-top-color: var(--cyan); border-radius: 50%; animation: games-spin 1s linear infinite; }
.games-state strong { color: var(--white); font: 900 31px var(--display); text-transform: uppercase; }
.games-state button { padding: 10px 16px; border: 0; background: var(--cyan); color: var(--navy); font-weight: 900; cursor: pointer; }
.games-state--error { border-color: rgba(224,68,74,.55); }
@keyframes games-spin { to { transform: rotate(360deg); } }

.matchup-lab { padding: 105px 5vw; display: grid; grid-template-columns: minmax(0, .7fr) minmax(540px, 1fr); gap: 7vw; align-items: center; background: linear-gradient(125deg, #081a33 0 48%, #0d2748 48%); }
.matchup-lab h2 { margin: 0; font: 900 clamp(54px, 5.5vw, 86px)/.85 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.matchup-lab__copy > p:last-of-type { max-width: 570px; margin: 28px 0; color: #b9c5d5; line-height: 1.65; }
.matchup-lab__copy label { display: block; color: var(--cyan); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.matchup-lab__copy select { width: min(100%, 470px); height: 50px; margin-top: 8px; padding: 0 14px; border: 1px solid rgba(33,212,253,.38); background: #061427; color: var(--white); }
.matchup-console { min-width: 0; border: 1px solid rgba(33,212,253,.25); background: rgba(5,15,30,.9); box-shadow: 16px 16px 0 rgba(224,68,74,.09); }
.matchup-console > header { padding: 17px 21px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--rule); color: var(--cyan); font-size: 8px; letter-spacing: .13em; }
.matchup-console > header b { color: var(--steel); }
.matchup-console__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border-bottom: 1px solid var(--rule); }
.matchup-console__teams article { min-width: 0; padding: 25px; }
.matchup-console__teams article:first-child { text-align: right; }
.matchup-console__teams > b { align-self: center; color: var(--red); font: 900 12px var(--display); }
.matchup-console__teams small, .matchup-console > section small, .matchup-console__links small { color: var(--steel); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.matchup-console__teams strong { display: block; margin: 7px 0; font: 900 clamp(54px, 6vw, 78px)/.8 var(--display); }
.matchup-console__teams p { margin: 16px 0 0; color: #aebbd0; font-size: 10px; line-height: 1.45; }
.matchup-console > section { padding: 24px; border-bottom: 1px solid var(--rule); }
.matchup-console > section h3 { margin: 9px 0 0; font: 900 26px/1.05 var(--display); text-transform: uppercase; }
.matchup-console__links { display: grid; grid-template-columns: 1fr 1fr; }
.matchup-console__links > div { padding: 22px; border-right: 1px solid var(--rule); }
.matchup-console__links > div:last-child { border: 0; }
.matchup-console__links nav { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 7px; }
.matchup-console__links a { padding: 7px 9px; border: 1px solid var(--rule); color: var(--white); font-size: 8px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.matchup-console__links a:hover { border-color: var(--cyan); color: var(--cyan); }
.matchup-console > footer { padding: 18px 22px; display: flex; justify-content: space-between; gap: 18px; border-top: 1px solid var(--rule); }
.matchup-console > footer a { color: var(--cyan); font-size: 8px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; }

.games-provenance { padding: 34px 5vw; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; background: var(--white); color: var(--navy); border-left: 8px solid var(--red); }
.games-provenance strong { font: 900 17px var(--display); text-transform: uppercase; }
.games-provenance p { max-width: 820px; color: #5f6f83; font-size: 11px; line-height: 1.55; }
.games-provenance a { font-size: 9px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.games-provenance small { grid-column: 2 / -1; color: #7b8797; }

@media (max-width: 1050px) {
  .games-hero { grid-template-columns: 1fr; }
  .week-board { min-height: 380px; }
  .week-board__number strong { font-size: 150px; }
  .game-toolbar { grid-template-columns: 1fr 1fr; }
  .game-toolbar output { text-align: left; }
  .matchup-lab { grid-template-columns: 1fr; background: var(--blue); }
  .matchup-console { max-width: 760px; }
  .games-provenance { grid-template-columns: 1fr; }
  .games-provenance small { grid-column: auto; }
}

@media (max-width: 720px) {
  .games-hero { min-height: 0; padding: 58px 18px 72px; }
  .games-hero h1 { font-size: 61px; }
  .games-hero__copy > p:last-of-type { font-size: 15px; }
  .featured-game { grid-template-columns: 1fr; }
  .featured-game__label { padding: 20px 18px; flex-direction: row; justify-content: space-between; border-right: 0; border-bottom: 1px solid #ced5de; }
  .featured-game__label b { margin: 0; writing-mode: initial; transform: none; }
  .featured-matchup { grid-template-columns: 1fr auto 1fr; gap: 10px; }
  .featured-matchup .team-token { display: block; }
  .featured-matchup .team-token span { display: block; }
  .featured-matchup .featured-clock { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: 1px solid #ced5de; }
  .featured-game article > footer { align-items: flex-start; flex-direction: column; }
  .schedule-section, .matchup-lab { padding: 70px 18px; }
  .games-heading { align-items: flex-start; flex-direction: column; }
  .game-toolbar { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { grid-template-columns: 86px minmax(0, 1fr); padding: 20px; gap: 18px; }
  .game-card__matchup b { max-width: 145px; }
  .matchup-console__teams { grid-template-columns: 1fr auto 1fr; }
  .matchup-console__teams article { padding: 18px 12px; }
  .matchup-console__teams p { font-size: 9px; }
  .matchup-console__links { grid-template-columns: 1fr; }
  .matchup-console__links > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .matchup-console > footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card { transition: none; }
  .games-state > span { animation: none; }
}