/* ~~ Font ~~ */
	@font-face {
		font-family: 'PublicPixel';
		src: url('publicpixel.ttf');
	}

/* ~~ Variables and definitions ~~ */
	:root{
		/* Text defaults*/
		--color: 		#0ff;
		--colort: 		#0ff5;
		--bot: 			green;
		--top: 			blue;
		/* Size default */
		--width:		80%;
		--height:		80%;
		--contentwidth:		calc(100% - 20px);
		--contentheight:	calc(100% - 50px);
		height:			100vh;
	}

	.centered {
		position:		absolute;
		top:			50%;
		left:			50%;
		transform:		translate(-50%, -50%);
	}

	.clickthrough {
		pointer-events:		none;
	}

/* ~~ Structure ~~ */
	body {
		height:			100vh;
		font-family:		'PublicPixel', monospace;
		background:	 	url(img/hiscorewp.svg) center/25%;
		margin:			0;
		display: 		grid;
		overflow:		hidden;
		grid-template-columns:	1fr 2fr 1fr;
	}

	.padding {
		backdrop-filter:
					blur(1px)
					brightness(.2)
					grayscale(.5);
	}

	.navlink {
		position:		absolute;
		top:			-3em;
		border:			1px solid white;
		border-radius:		0 0 10px 0;
		padding:		0.5em 1ch;
		background:		black;
		color:			white;
		transition:		ease-out .3s top;
		z-index:		100;
	}
		.navlink:focus {
			top:		0px;
		}

/* ~~ Arcade cabinet ~~ */
	/* ~~ Structure ~~ */
	.cabinet {
		display: 		grid;
		grid-template-columns:	30px auto 30px;
		min-width:		620px;
		width:			100%;
		height:			100%;
		background:		#222;
	}

	.border {
		background:
					linear-gradient(
						transparent,
						#0007 10%,
						#0007 80%,
						transparent
					),
					linear-gradient(
						var(--direction),
						#111,
						#111 30%,
						#333 80%,
						#122 100%
					);
		box-shadow:
					var(--outer)0 10px #000a,
					var(--inner)0 10px #0007;
		z-index:		4;
	}
		.border.left{--direction: to right; --outer: -10px; --inner:5px}
		.border.right{--direction: to left; --outer: 10px; --inner:-5px}

	.monitor {
		position:		relative;
		display:		grid;
		grid-template-rows:	50px auto 100px;
	}

	/* ~~ Top panel ~~ */
	.top {
		width:			100%;
		height:			100%;
		background:		linear-gradient(#111, #171717);
	}

	/* ~~ Screen ~~ */
	.screen {
		position:		relative;
	}

	.bezel {
		width:			var(--width);
		height:			var(--height);
		background:		#111;
		padding:		1em 0.5ch;
		border-radius:		90% / 8%;
	}

	/* Overlays */
	.glow {
		box-shadow:		0 0 50px #8ff3;
		width:			var(--width);
		height:			var(--height);
		z-index:		2;
		border-radius:		100%/5%;
	}

	.screen .overlay {
		width:		calc(var(--width) + 1ch);
		height:		calc(var(--height) + 2em);
		border-radius:	89% / 8%;
		box-shadow:
				/* Surface shape */
					inset 20px 0 20px -20px #0007,  /* Left */
					inset -30px 0 30px -30px #0007, /* Right */
					inset 0 -150px 75px -50px #0007,/* Bot */
					inset 0 150px 75px -50px #0007, /* Top */
				/* Screen edge fade */
					inset 0 100px 50px -50px black, /* Top */
					inset 0 -100px 50px -50px black;/* Bot */
		z-index:	1;
	}

	.scanlines {
		width:		var(--contentwidth);
		height:		var(--contentheight);
		background:	repeating-linear-gradient(to right,
					#0005,
					transparent 1px,
					transparent 2px,
					#0005 2px,
					#0005 3px);
		border-radius:	100% / 5%;
		z-index:	1;
	}

	/* ~~ Content ~~ */
	.content {
		width:		var(--contentwidth);
		height:		var(--contentheight);
		border-radius:	100% / 5%;
		background:	url(img/hiscorebg.png) fixed;
		background-size: 100px;
		color:		var(--color);
		overflow:	scroll;
		image-rendering: pixelated;
		animation:	starscroll 1.5s linear infinite;
	}

		@keyframes starscroll {
			0%   {background-position: 0 0;}
			100% {background-position: 0 99px;}
		}

	.content section {
		background-color: #000c;
		border-radius: 	10px;
		box-shadow: 	0 0 10px #000;
	}

	/* Text stuff */
	h1, th {
		text-transform:	uppercase;
		text-align:	center;
	}

	p {
		padding: 	0 1ch;
	}
	td:last-child {
		text-align:	center;
	}

	td:not(:last-child) {
		text-align:	right;
	}

	/* Bloom effect */
	p, td, th, h1 {
		color:		var(--color);
		filter:
				drop-shadow(0 0 2px var(--colort))
				drop-shadow(0 0.5px 0 var(--bot))
				drop-shadow(0 -0.5px 0 var(--top));
	}
		h1, td:first-child {--color: #ff0; --colort: #ff05; --bot: red; --top: green;}
		th {--color: #f00; --colort: #f005; --bot: red; --top: transparent;}
		td:not(:first-child) {--color: #fff; --colort: #fff5; --bot: red; --top: blue;}

	/* Table */
	table {
		width:		100%;
		padding:	0 1ch;
	}
		td:first-child {width: 50%;}
		td:nth-child(2n) {width: 11ch;}

	/* ~~ Bottom panel ~~ */
	.controls {
		width:		100%;
		height:		100%;
		background:
				linear-gradient(
					transparent,
					#0007 60%,
					#aaa1 70%,
					#000a 75% 100%
				) 0 0/100% 100%,
				linear-gradient(
					45deg,
					black 25%,
					transparent 25% 75%,
					black 75%
				) 0 0/10px 10px,
				linear-gradient(
					45deg,
					black 25%,
					transparent 25% 75%,
					black 75%
				) 5px 5px/10px 10px,
				linear-gradient(
					to bottom,
					rgb(8, 8, 8),
					rgb(32, 32, 32)
				) 0 0/10px 5px;
		position:	relative;
	}

	/* ~~ Buttons ~~ */
	.buttons {
		display:	flex;
		gap:		10px;
		position:	absolute;
		right:		10%;
		top:		-5px;
		z-index:	3;
	}

	.switch {
		width:		55px;
		height:		42px;
		border-radius:	100% / 75%;
		margin-top:	15px;
		background:	#888;
		box-shadow:	inset 0 -4px 0 #444;
	}

	.plunger {
		width:		50px;
		height:		calc(35px + 15px);
		border-radius:	100% / 75%;
		margin-left:	2.5px;
		background:	var(--buttoncolor);
		transition:	ease-in-out 0.1s all;
		position:	relative;
		top:		-15px;
		box-shadow:	inset 0 -15px 0 0 var(--buttonshadow);
	}
		.switch:where(:hover, :active, :focus) .plunger {
			height:	calc(35px - 4px);
			border-radius: 100%;
			top:	4px;
			box-shadow: inset 0 4px 0 0 #444;
		}

	.plunger span {
		display:	inline-block;
		width:		100%;
		color:		var(--buttontext);
		text-shadow:	0 -1px 0 var(--buttonshadow);
		text-transform:	uppercase;
		text-align:	center;
		font-size:	10px;
		position:	relative;
		top:		.3em;
	}
		.plunger.red {--buttoncolor: #900; --buttonshadow: #500; --buttontext: #fbb;}
		.plunger.green {--buttoncolor: #090; --buttonshadow: #050; --buttontext: #bfb;}
		.plunger.blue {--buttoncolor: #00a; --buttonshadow: #007; --buttontext: #bbf;}

	/* ~~ Stickers ~~ */
	.sticker {
		position:	absolute;
		filter:
				brightness(.4)
				drop-shadow(0 0 3px black);
		z-index:	3;
	}

		.sticker.deer {
			width:	100px;
			max-width: 30vw;
			transform: rotateZ(25deg);
			right:	30px;
			bottom:	0;
		}
		.sticker.pau{
			width:	75px;
			max-width: 25vw;
			transform: rotateZ(20deg);
			left:	20px;
			top:	25%;
		}

/* ~~ Responsive Design ~~ */
/* ~~ Dynamic sizes ~~ */
@media screen and (max-width: 620px) {
	:root {
		--width:	78vw;
		--height:	64vh;
	}

	.padding {
		display:	none;
	}

	body {
		display:	grid;
		grid-template-columns: auto;
	}

	.cabinet {
		grid-template-columns: 5% 1fr 5%;
		min-width:	unset;
	}
}

@media screen and (max-width: 620px), screen and (max-height: 705px) {
	.monitor {
		grid-template-rows: 10vh 1fr 10vh;
	}
}

@media screen and (max-height: 705px) {
	:root {
		--height:	calc(80vh - 2em - 4px);
	}
}

@media screen and (max-width: 430px) {
	table {
		font-size:	smaller;
	}
}

@media screen and (max-width: 360px) {
	table {
		font-size:	x-small;
	}
}