* {
	margin: 0;
	padding: 0;
	color: white;
	font-family: 'Poppins', sans-serif;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-text-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html {
	overflow-x: hidden;
}

body {
	height: 100dvh;
	width: 100vw;
	touch-action: manipulation;
	background: #020026;
	overflow: hidden;
}

h1 {
	font-size: 60px;
}

.day-selector {
	height: max(100px, 7vmax);
	width: 1000vw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	position: fixed;
	top: 0;
	background-color: #020026;
	z-index: 2;
	border-bottom: solid 2px #7e7ae6;
}

.day {
	padding: 0 25px;
	height: 60%;
	font-size: clamp(20px, 1.5vmax, 28px);
	min-width: max(120px, 7vmax);
	max-width: max(120px, 7vmax);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	white-space: nowrap;
	cursor: pointer;
	transition: background 300ms ease-in, color 300ms ease, text-shadow 300ms ease, border 300ms ease-in;
	border-radius: 30px;
	border: 0px solid black;
}

@media (hover: hover) {
	.day:hover {
		background: rgba(126, 122, 230, 0.2);
	}
}

.day[selected] {
	background: #7e7ae6;
	text-shadow: 0 0 5px #fff;
	cursor: default;
}

.day[selected]:has(.day-today) {
	background: transparent;
	border: 2px solid #7e7ae6;
}

.day[selected] .day-today {
	color: #d4a017;
	text-shadow: 0 0 7px #96761c;
}

.day-today {
	color: #d4a017;
	font-weight: bold;
	transition: text-shadow 300ms ease;
}

.day-date {
	line-height: 1;
}

.day-year {
	color: #d4a017;
	font-size: max(16px, 1vmax);
	translate: 0 calc(max(16px, 1vmax) / 2 + 5px);
	line-height: 0;
	transition: color 300ms ease, text-shadow 300ms ease;
}

.day:has(.day-year) {
	padding-bottom: 12px;
}

.day[selected] .day-year {
	color: #ffb700;
	text-shadow: 0 0 5px #000;
}

.set-date {
	position: fixed;
	z-index: 3;
	height: max(100px, 7vmax);
	display: flex;
	align-items: start;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px 0 20px;
	background: linear-gradient(90deg, #020026 87.5%, transparent 100%);
}

.custom-date-label {
	min-width: 100%;
	text-align: center;
	color: #b4b2f6;
	font-weight: bold;
	font-size: 1.4vmax;
}

.custom-date {
	height: 40%;
	min-width: max(100px, 7.5vmax);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #020026;
	text-align: center;
	position: relative;
	color: #b4b2f6;
	font-weight: bold;
	font-size: min(1.2vmax, 22px);
	border: 2px solid #7e7ae6;
	border-radius: 25px;
	cursor: pointer;
	pointer-events: all;
}

.custom-date:focus {
	outline: none;
}

.custom-date::-webkit-calendar-picker-indicator {
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	cursor: pointer;
}

.custom-date.deactive::-webkit-calendar-picker-indicator {
	pointer-events: none;
}

.no-games {
	position: absolute;
	height: calc(100% - max(100px, 7vmax));
	width: 100vw;
	top: max(100px, 7vmax);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: min(4.5vmax, 80px);
	font-weight: bold;
	opacity: 0;
	pointer-events: none;
}

.games-container {
	margin-top: max(100px, 7vmax);
	height: calc(100% - max(100px, 7vmax));
	overflow-y: auto;
}

.games-container::-webkit-scrollbar {
	width: 8px;
}

.games-container::-webkit-scrollbar-track {
	background: #234a61;
	border-radius: 100px;
	margin: 30px 0;
}

.games-container::-webkit-scrollbar-thumb {
	background-color: #9dbdd0;
	border-radius: 100px;
}

.games {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0px 30px 30px 30px;
	padding-top: 30px;
	opacity: 0;
	transition: opacity 300ms ease-in;
}

@media (max-width: 1500px) {
	.games {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1000px) {
	.games {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-aspect-ratio: 3/5) {
	.game {
		height: 250px !important;
	}
}

.game {
	height: 200px;
	border: 2px solid #7e7ae6;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 40px;
	transition: background 300ms ease, border-color 300ms ease-in, transform 300ms ease, height 300ms ease;
	overflow: hidden;
}

@media (hover: hover) {
	.game:hover {
		background: rgba(126, 122, 230, 0.075);
		border-color: #020026;
		transform: scale(1.05);
		cursor: pointer;
	}
}

.game-hovered {
	background: rgba(126, 122, 230, 0.075);
	border-color: #020026;
	transform: scale(1.05);
	cursor: pointer;
}

.game-scores {
	height: 100%;
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.team-away,
.team-home {
	width: 100%;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.team-away {
	background: linear-gradient(90deg, #98002e 0%, transparent 100%);
}

.team-home {
	background: linear-gradient(90deg, #f58426 0%, transparent 100%);
}

.team-id {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: justify;
}

.team-logo {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 30%, transparent 60%);
}

.team-logo > img {
	height: 60%;
	margin: 15px;
}

.team-name {
	font-weight: bold;
	text-shadow: 0 0 10px #000;
	white-space: nowrap;
}

.team-name-text {
	line-height: 1;
}

.team-name-text,
.team-score,
.team-record-sub {
	transition: color 300ms ease, text-shadow 300ms ease;
}

.game-loser .team-name-text,
.game-loser .team-score,
.game-loser .team-record-sub {
	color: #ccc;
}

.game-winner .team-name,
.game-winner .team-score,
.game-winner .team-record-sub {
	text-shadow: 0 0 15px #fff;
}

.team-record {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: max(24px, 1.5vmax);
	margin-left: 10px;
	margin-right: 10%;
	white-space: nowrap;
	text-shadow: 0 0 10px #000;
}

.team-record-sub {
	line-height: 0;
	font-size: 16px;
	text-shadow: 0 0 10px #000;
}

.team-record-sub:empty {
	display: none;
}

.team-score {
	font-weight: bold;
	font-size: max(32px, 1.75vmax);
	margin-right: 10%;
	margin-left: 10px;
	white-space: nowrap;
	text-shadow: 0 0 10px #000;
}

.game-info {
	height: 100%;
	width: 40%;
	display: flex;
	flex-direction: column;
}

.fa-clock {
	margin-right: 5px;
}

.game-where-when {
	margin: 25px 20px 0 5px;
	padding-bottom: 3%;
	border-bottom: 2px solid #7e7ae6;
	height: 10%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	font-size: clamp(16px, 3vw, 1.25vh);
}

.game-where-when > .postponed {
	color: #ff6459;
}

.game-where-when > .pregame {
	color: #176cff;
}

.game-time,
.game-network,
.game-event,
.game-status {
	white-space: nowrap;
	word-wrap: break-word;
}

.game-network {
	margin-left: 10px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 520px) {
	.game-network {
		display: none;
	}
}

.game-event {
	margin: 3px 20px 0 5px;
	color: #d4a017;
	font-weight: bold;
}

.game-highlight {
	flex: 1;
	height: 40%;
	display: flex;
	align-items: center;
	justify-content: left;
	translate: 0 -3px;
	transition: opacity 200ms ease-in;
	opacity: 1;
}

.invis-highlights .game-highlight.completed {
	opacity: 0 !important;
}

.game-highlight-img {
	translate: 0 -4px;
	height: max(40%, 3.5vh);
	margin-right: 5px;
}

.game-highlight-img-big {
	height: 100%;

	border-radius: 40%;
}

.game-highlight-img-small {
	position: absolute;
	height: 60%;
	right: 0;
	bottom: 0;
	translate: 20% 20%;
}

@media (max-width: 520px) {
	.game-highlight-img {
		display: none;
	}
}

.game-highlight-text {
	height: 100%;
	width: 100%;
	margin: 0 20px 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.game-highlight-text > p {
	font-size: clamp(14px, 2.5vw, 1.2vh);
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: break-word;
	max-height: 3.7em;
	line-height: 1.25;
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	box-sizing: border-box;
	text-align: center;
}