:root {
	color-scheme: light dark;
	--line: #aaa;
	--header-bg: #cbf0fa;
}

@media (prefers-color-scheme: dark) {
	:root {
		--header-bg: #15363e;
	}
}

body {
	font-family: 'Helvetica Neue', Helvetica, Arial, FreeSans, sans-serif;
	margin: 0;
}

section {
	margin: 0 8px;
}

.intro p {
	font-size: .8rem;
	padding-top: 1em;
	text-align: center;
}

/* Layout ------------------------------------------------------------------
   The bracket is three column-groups: the left half (East + South), the
   centre (Final Four + title game) and the right half (West + Midwest).
   Each group owns its own date band, which is what lets a group scroll
   horizontally on a phone without the band drifting out of register. */

.bracket {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.half {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Fill the height left over by the date band so every group's columns line
   up with each other. */
.half > .tournament:last-child {
	flex: 1 1 auto;
}

.tournament {
	display: flex;
	flex-direction: row;
}

.tournament .round {
	font-size: .5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* A starting size, not a floor: the columns shrink to fit the viewport. */
	width: 200px;
	list-style: none;
	padding: 0;
}

.tournament .round .spacer {
	flex-grow: 2;
}

.tournament .round .spacer:first-child,
.tournament .round .spacer:last-child {
	flex-grow: 1;
}

.tournament-header {
	margin-top: 1em;
	text-align: center;
	font-weight: bold;
	background-color: var(--header-bg);
}

/* Equal-height bands across all three groups, so the brackets below them
   start at the same y. Never let a round name wrap and break that; let a long
   one ("National Championship") spill into the blank columns flanking it
   instead, which reads as centred rather than clipped. */
.tournament-header .round {
	min-height: 2.8em;
	white-space: nowrap;
	overflow: visible;
}

.round-1 li.game-left,
.round-2 li.game-left,
.round-3 li.game-left,
.round-4 li.game-left,
.semi-final li.game-left {
	padding-left: 0.5em;
}

.round-1 li.game-right,
.round-2 li.game-right,
.round-3 li.game-right,
.round-4 li.game-right,
.semi-final li.game-right {
	padding-right: 0.5em;
}

.region {
	font-size: 1rem;
	font-weight: bold;
}

.region-right {
	text-align: right;
	padding-right: 5px;
}

.region-left {
	text-align: left;
	padding-left: 5px;
}

.seed-num {
	font-size: .8em;
	opacity: .7;
}

/* Connector lines. Order matters: game-top clears the side border so the
   bracket "elbow" reads correctly. Don't reorder these four rules. */
li.game-right {
	text-align: right;
	border-left: 1px solid var(--line);
}

li.game-left {
	border-right: 1px solid var(--line);
}

li.game-bottom {
	border-bottom: 1px solid var(--line);
}

li.game-top {
	border: none;
	border-bottom: 1px solid var(--line);
}

li.game-left.spacer {
	border-right: 1px solid var(--line);
	min-height: 5px;
	padding-right: .25em;
}

li.game-right.spacer {
	border-left: 1px solid var(--line);
	min-height: 5px;
	padding-left: .25em;
	text-align: left;
}

.final {
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
	border: 1px solid var(--line);
	margin-top: 1em;
	margin-bottom: 1em;
	font-weight: bold;
}

@media (min-width: 800px) {
	.intro p {
		font-size: 1rem;
	}

	.tournament .round {
		font-size: .75rem;
	}

	.region {
		font-size: 1.5rem;
	}
}

/* Letting team names wrap removes the columns' ability to shrink below their
   min-content width, so 13 of them stop fitting. Only switch it on once
   there is room, or the page gains a horizontal scrollbar. */
@media (min-width: 1000px) {
	.tournament:not(.tournament-header):not(.mini) .round {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/* =========================================================================
   NARROW-SCREEN VIEW

   Below 800px the 13-column mirrored bracket is unusable, so it is replaced
   wholesale: a champion card, then the four regions as condensed four-column
   brackets, then the Final Four. Nothing here scrolls horizontally, down to
   320px. The two views are alternatives and never appear together.
   ====================================================================== */

.mobile-views {
	display: none;
}

@media (max-width: 799px) {
	.bracket {
		display: none;
	}

	.mobile-views {
		display: block;
	}
}

.champion-card {
	text-align: center;
	border: 2px solid var(--line);
	padding: .75em;
	margin-top: 1em;
}

.champion-label {
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .7;
}

.champion-name {
	font-size: 1.5rem;
	font-weight: bold;
	padding: .1em 0;
}

.champion-over {
	font-size: .8rem;
	opacity: .7;
}

.mobile-views h3 {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .7;
	margin: 1em 0 .4em;
}

.mobile-views h3 small {
	text-transform: none;
	letter-spacing: 0;
	font-weight: normal;
}

.card {
	border: 1px solid var(--line);
	margin-bottom: .4em;
}

.side {
	font-size: .85rem;
	padding: .35em .5em;
}

.side + .side {
	border-top: 1px solid var(--line);
}

.side.won {
	font-weight: bold;
	background-color: var(--header-bg);
}

.panel-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: .5em;
	background-color: var(--header-bg);
	padding: .45em .6em;
	margin: 1em 0 0;
	font-size: .8rem;
}

.panel-name {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.panel-winner {
	opacity: .8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The four-column region bracket. Columns share the width evenly and can
   shrink freely, which is what guarantees no horizontal scroll at 320px. */
.tournament.mini {
	padding-top: .5em;
}

.tournament.mini .round {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	font-size: .62rem;
}

/* A4 portrait is 794 CSS px, which matches the narrow-screen breakpoint above.
   Force the real bracket back on, or that paper size would print the phone
   view instead. */
@media print {
	.mobile-views {
		display: none !important;
	}

	.bracket {
		display: flex !important;
	}

	.intro {
		display: none;
	}

	.tournament-header {
		margin-top: 0;
	}

	.tournament .round {
		font-size: .5rem;
		margin: 0;
		flex: 0 1 auto;
	}
}