@layer components {
	/* ---- Game page hero ---- */
	.game-hero { position: relative; isolation: isolate; background: var(--black); color: var(--white-text); border-bottom: var(--nav-rule) solid var(--red); overflow: hidden; }
	.game-hero__media, .game-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
	.game-hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.75) 60%, var(--black) 100%); }
	.game-hero__inner { padding-block: var(--sp-5) var(--sp-7); display: flex; flex-direction: column; align-items: center; text-align: center; }
	.game-hero__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-dark-muted); }
	.game-hero__back .icon { width: 1em; height: 1em; }
	.game-hero__back:hover { color: var(--white-text); }
	.game-hero__context { margin-top: var(--sp-6); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red); }

	.matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); width: 100%; max-width: 960px; margin-top: var(--sp-5); }
	.matchup__team { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
	.matchup__mark { display: grid; place-items: center; width: 84px; height: 84px; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 3rem; line-height: 1; padding-top: 4px; }
	.matchup__logo { width: 84px; height: 84px; display: grid; place-items: center; background: var(--white); }
	.matchup__logo-img { width: 100%; height: 100%; object-fit: contain; }
	.matchup__logo-empty { width: 100%; height: 100%; }
	.matchup__name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1; letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.matchup__rank { font-size: 0.45em; color: var(--red); vertical-align: top; }
	.matchup__record { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--on-dark-muted); }
	.matchup__center { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-inline: var(--sp-3); }
	.matchup__score { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 0.9; letter-spacing: var(--ls-tight); }
	.matchup__score b { font-weight: inherit; color: var(--on-dark-muted); }
	.matchup__score i { width: 3px; height: 0.6em; background: var(--red); }
	.matchup__score.is-corbin b:first-child, .matchup__score.is-opp b:last-child { color: var(--white-text); }
	.matchup__vs { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; text-transform: uppercase; color: var(--on-dark-muted); }
	.matchup__status { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red); }
	.matchup__status--time { color: var(--white-text); font-size: var(--fs-small); }

	.game-hero__when { margin-top: var(--sp-6); font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; }
	.game-hero__venue { display: block; margin-top: 4px; color: var(--on-dark-muted); font-weight: var(--fw-medium); }
	.game-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); }

	/* ---- Body ---- */
	.game-body { padding-block: var(--sp-6) var(--sp-9); }
	.game-body__grid { display: grid; gap: var(--sp-5); }
	.game-body__main { display: grid; gap: var(--sp-5); align-content: start; }
	.card { background: var(--white-card); border: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); padding: var(--pad-card); }
	.card__title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h4); letter-spacing: 0.02em; text-transform: uppercase; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: var(--bw-accent) solid var(--gray-ink); }

	.scoreboard__table { width: 100%; border-collapse: collapse; font-family: var(--font-display); }
	.scoreboard__table th, .scoreboard__table td { padding: 10px 8px; text-align: center; border-bottom: var(--bw-hair) solid var(--gray-line); font-size: var(--fs-body); }
	.scoreboard__table thead th { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); }
	.scoreboard__table tbody tr:last-child th, .scoreboard__table tbody tr:last-child td { border-bottom: 0; }
	.scoreboard__team { text-align: left !important; font-weight: var(--fw-extra); text-transform: uppercase; letter-spacing: 0.02em; }
	.scoreboard__final { font-weight: var(--fw-black); font-size: 1.25rem !important; background: var(--gray-section); }
	.scoreboard__table tbody td { color: var(--gray-body); font-weight: var(--fw-semi); }
	.scoreboard__table tbody tr.is-winner td, .scoreboard__table tbody tr.is-winner th { color: var(--gray-ink); }
	.scoreboard__table tbody tr.is-winner .scoreboard__final { color: var(--red); }

	.details__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-5); }
	.details__row dt { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-meta); }
	.details__row dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); }
	.details__notes, .details__source { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--gray-line); font-size: 0.9375rem; color: var(--gray-body); }
	.details__source a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

	.minilist { display: grid; }
	.minilist__item { border-bottom: var(--bw-hair) solid var(--gray-line); }
	.minilist__link { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--sp-3); padding: 10px 0; color: var(--gray-ink); font-family: var(--font-display); }
	.minilist__date { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); }
	.minilist__opp { font-weight: var(--fw-bold); text-transform: uppercase; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.minilist__opp em { font-weight: var(--fw-medium); text-transform: lowercase; color: var(--gray-body); }
	.minilist__val { font-weight: var(--fw-extra); font-size: var(--fs-small); color: var(--gray-meta); }
	.minilist__item.is-final .minilist__val { color: var(--gray-ink); }
	.minilist + .textlink { margin-top: var(--sp-4); }
	.minilist__story { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; color: var(--gray-ink); }
	.minilist__story-title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--fs-h4); line-height: 1.1; }
	.game-body__side { display: grid; gap: var(--sp-5); }

	@media (min-width: 768px) {
		.details__list { grid-template-columns: repeat(3, 1fr); }
	}
	@media (min-width: 1024px) {
		.game-body__grid { grid-template-columns: 1fr 360px; align-items: start; }
	}
	@media (max-width: 479px) {
		.matchup { gap: var(--sp-2); }
		.matchup__mark, .matchup__logo { width: 60px; height: 60px; }
		.matchup__mark { font-size: 2.2rem; }
	}
}