@font-face {
	font-family: "main";
	src: url("main.ttf");
}

@font-face {
	font-family: "clock";
	src: url("clock.ttf");
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #000;
}

body {
	position: relative;
	width: min(100vw, 177.7778dvh);
	height: min(100dvh, 56.25vw);
	margin: 0;
	overflow: hidden;
	container-type: inline-size;
	font-family: main, sans-serif;
	background: url("bg.png") center / cover;
	cursor: url("cursor.png"), auto;
}

a {
	color: inherit;
	text-decoration: none;
}

.grid-main,
.grid-main2 {
	position: absolute;
	top: 8.5%;
	right: 8.5%;
	left: 8.5%;
	height: 60%;
	margin: 0;
}

.grid-main > .grid-item,
.grid-main2 > .grid-item2 {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	margin: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 3% 1.2%;
}

.grid-main br,
.grid-main2 br,
.grid-forwardmob,
.grid-backmob {
	display: none;
}

.grid-channel {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 10% / 18%;
	background: #fff;
	box-shadow: inset 0 0 0 .35cqw rgb(184 183 188);
	cursor: url("cursor.png"), pointer;
	transition: filter 80ms linear, box-shadow 80ms linear, transform 80ms linear;
}

.grid-channel:hover {
	z-index: 3;
	filter: brightness(1.08);
	box-shadow: inset 0 0 0 .38cqw rgb(87 202 237), 0 0 .75cqw rgb(87 202 237 / .85);
	transform: scale(1.025);
}

.logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The bundled reference is the exact channel artwork and doubles as a sprite sheet. */
.grid-main .grid-channel {
	background-image: url("ref.png");
	background-repeat: no-repeat;
	background-size: 500% 533.333%;
}

.grid-main .logo {
	opacity: 0;
}

.grid-main .grid-channel:nth-child(1)  { background-position: 10.6% 10.4%; }
.grid-main .grid-channel:nth-child(3)  { background-position: 36.9% 10.4%; }
.grid-main .grid-channel:nth-child(5)  { background-position: 63.2% 10.4%; }
.grid-main .grid-channel:nth-child(7)  { background-position: 89.5% 10.4%; }
.grid-main .grid-channel:nth-child(10) { background-position: 10.6% 35.7%; }
.grid-main .grid-channel:nth-child(12) { background-position: 36.9% 35.7%; }
.grid-main .grid-channel:nth-child(14) { background-position: 63.2% 35.7%; }
.grid-main .grid-channel:nth-child(16) { background-position: 89.5% 35.7%; }
.grid-main .grid-channel:nth-child(20) { background-position: 10.6% 60.9%; }
.grid-main .grid-channel:nth-child(22) { background-position: 36.9% 60.9%; }
.grid-main .grid-channel:nth-child(24) { background-position: 63.2% 60.9%; }
.grid-main .grid-channel:nth-child(26) { background-position: 89.5% 60.9%; }

.grid-channellabel,
.grid-channellabel2 {
	position: absolute;
	z-index: 5;
	bottom: -9%;
	left: 35%;
	display: none;
	width: 30%;
	height: 8%;
	place-items: center;
	border: .2cqw solid rgb(184 183 188);
	border-radius: 999px;
	background: #fff;
	text-align: center;
}

.grid-channel:hover + .grid-channellabel,
.grid-channel:hover + .grid-channellabel2 {
	display: grid;
}

.grid-channellabel h2,
.grid-channellabel2 h2 {
	margin: 0;
	font-size: 1.5cqw;
	font-weight: 400;
}

.grid-main > .grid-item > a,
.grid-main2 > .grid-item2 > a {
	position: absolute;
	z-index: 4;
	display: block;
	width: 8cqw;
	height: 8cqw;
}

.grid-main > .grid-item > a:has(.grid-forwardmob),
.grid-main2 > .grid-item2 > a:has(.grid-forwardmob),
.grid-main2 > .grid-item2 > a:has(.grid-backmob) {
	display: none;
}

.grid-main > .grid-item > a:has(.grid-forward),
.grid-main2 > .grid-item2 > a:has(.grid-forward) {
	top: 34%;
	right: -9.5%;
}

.grid-main2 > .grid-item2 > a:has(.grid-back) {
	top: 34%;
	left: -9.5%;
}

.grid-forward,
.grid-back {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: url("cursor.png"), pointer;
}

.grid-forward { background-image: url("forward.png"); }
.grid-back { background-image: url("back.png"); }
.grid-forward:hover { background-image: url("forwardhover.png"); }
.grid-back:hover { background-image: url("backhover.png"); }

.grid-bottombar {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 29.5%;
	margin: 0;
	background: url("bottom.png") center / 100% 100% no-repeat;
	text-align: center;
}

.grid-bottombar > .grid-item {
	position: absolute;
	inset: 0;
}

.grid-bottombar br {
	display: none;
}

.clock,
.date {
	position: absolute;
	left: 50%;
	display: block;
	width: max-content;
	color: rgb(130 130 132);
	line-height: 1;
	transform: translateX(-50%);
}

.clock {
	top: 3%;
	font-family: clock, sans-serif;
	font-size: 5.4cqw;
	font-weight: 400;
}

.clock small {
	display: inline-block;
	margin-right: .65cqw;
	font-family: main, sans-serif;
	font-size: 2.2cqw;
	font-weight: 700;
}

.date {
	top: 47%;
	font-size: 3.5cqw;
	font-weight: 700;
}

.grid-bottombar::before,
.grid-bottombar::after {
	position: absolute;
	z-index: 3;
	bottom: 15%;
	display: grid;
	width: 9cqw;
	height: 9cqw;
	place-items: center;
	border: .25cqw solid rgb(70 197 235);
	border-radius: 50%;
	color: rgb(139 139 141);
	background: radial-gradient(circle at 42% 34%, #fff 0 28%, #e4e5e8 68%, #c9cbd0 100%);
	box-shadow: .7cqw .35cqw 0 rgb(145 145 150 / .28), inset .25cqw .25cqw .5cqw #fff;
}

.grid-bottombar::before {
	left: 4.7%;
	content: "Wii";
	font-size: 3cqw;
}

.grid-bottombar::after {
	right: 4.4%;
	content: "✉";
	font-family: sans-serif;
	font-size: 4.2cqw;
}

.grid-bottombar > .grid-item > div {
	position: absolute;
	top: 43%;
	left: 18.8%;
	display: grid;
	width: 3.5cqw;
	height: 5.2cqw;
	place-items: center;
	border: .25cqw solid rgb(145 145 148);
	border-radius: .35cqw;
	color: rgb(145 145 148);
	background: linear-gradient(135deg, #fff, #d9d9dc);
	box-shadow: .25cqw .25cqw .2cqw rgb(80 80 80 / .3);
	font-family: sans-serif;
	font-size: 1.1cqw;
}

.grid-bottombar > .grid-item > div::after {
	content: "SD";
}

@media (prefers-reduced-motion: reduce) {
	.grid-channel {
		transition: none;
	}
}