* {
	box-sizing: border-box;
}
html {
	background-color: #555;

	--shell-overlap-size : 82mm;
	--shell-outer-border-radius : 15mm;
	--shell-inner-border-radius : 5mm;
}
form {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap:2%;

	[type=text] {
		width: 5ch;
		text-align: center;
	}

	[type=range] {
		translate: 0 1ch;
	}
}
#layers {
	max-width: 173mm;
	scale: var(--scale-factor);
	position: relative;
	margin: 0 auto;
	translate: 0 10%;
}
#shell {
	filter:drop-shadow(0 2mm 2mm lch(0 0 0 / 0.5));
}
#shell, #internals {
	display: flex;
	flex-direction: column;
	contain: paint;
	width: 100%;
}
#top {
	background-color: var(--shell-color);
	padding: 1mm;
	position: relative;
	z-index: 9;
	border-radius: var(--shell-outer-border-radius);
	border-bottom-left-radius : 0mm;
	border-bottom-right-radius: 0mm;
	box-shadow:
		inset 0.4mm 0.4mm 0.3mm oklch(100% 0 0 / 0.15),
		inset -0.4mm -0.4mm 0.1mm oklch(0% 0 0 / 0.15);

	#top_inner {
		background: #111 linear-gradient(to left, transparent, rgba(255 255 255 / 0.1));
		border-radius: 13.5mm 13.5mm 3mm 3mm;

		border-radius: calc(var(--shell-outer-border-radius) * 0.98) calc(var(--shell-outer-border-radius) * 0.98) 3mm 3mm;
		display: flex;
		height: 78mm;
		justify-content: space-between;
		align-items: center;
		box-shadow: inset 0.4mm 0.4mm 0.3mm oklab(0 0 0 / 0.4), 0.1mm 0.4mm 0.25mm oklch(100% 0 0 / 0.1);
		position: relative;

		.IR {
			position: absolute;

			&#IR-LED-TL {
				top:  10mm;
				left: 3mm;
			}
			&#IR-LED-BL {
				bottom: 3mm;
				left:   3mm;
			}
			&#IR-LED-TR {
				top:  10mm;
				right: 3mm;
			}
			&#IR-LED-BR {
				bottom: 3mm;
				right:   3mm;
			}
		}

		.speaker {
			background-color: #000;
			border-radius: 1mm;
			height:12mm;
			width: 2mm;
		}
		#left-speaker {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		#right-speaker {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		#top_screen {
			--aspect-ratio : calc(2048 / 1080);
			--circle : calc(sqrt(pow(var(--aspect-ratio), 2) + 1));
			--size   : calc(6.2 * 25.4 * 1mm);
			--height : calc(var(--size)   / var(--circle));
			--width  : calc(var(--height) * var(--aspect-ratio));
			background-color: #252424;
			background-image: url("./img/screen/canvas_2048x1080.webp");
			background-size: cover;
			background-position: center;
			height: var(--height);
			width : var(--width);
		}
	}
}
#hinge {
	height:  10.00mm;
	display: flex;
	position: relative;
	justify-content: center;
  	border-radius: 2mm;
	border-top-left-radius :  var(--shell-inner-border-radius);
	border-top-right-radius:  var(--shell-inner-border-radius);
	flex-grow: 1;

	> * {
		background-color: var(--shell-color);
		background-image: linear-gradient(to top, lch(0 0 0 / 0.35), lch(0 0 0 / 0.15) 10%, lch(100% 0 0 / 0.10) 50% 70%, lch(0 0 0 / 0.08));
		flex-grow: 1;
		position: relative;
		box-shadow:
			0 0.4mm 0.3mm oklch(0 0 0 / 0.2),
			0 0.7mm 0.6mm oklch(0 0 0 / 0.2);
	}
	> :first-child {
		border-bottom-left-radius : var(--shell-inner-border-radius);
		filter: drop-shadow(0mm 2mm 2mm oklch(0 0 0 / 0.3));
	}
	> :last-child {
		border-bottom-right-radius: var(--shell-inner-border-radius);
		filter: drop-shadow(0mm 2mm 2mm oklch(0 0 0 / 0.3));
	}
	.hinge-post {
		width:20mm;
		flex-grow: 0;
		background-image: linear-gradient(to top, lch(0 0 0 / 0.05) 5%, lch(100% 0 0 / 0.12) 50% 60%, lch(0 0 0 / 0.02) 88%, lch(0 0 0 / 0.5) 100%);
		box-shadow:
			0.2mm 0 0 oklch(0 0 0 / 0.4),
			-0.2mm 0 0 oklch(0 0 0 / 0.4),
			0.5mm -0.7mm 0 oklch(0 0 0 / 0.1),
			-0.5mm -0.7mm 0 oklch(0 0 0 / 0.1),
			0 -0.4mm 0 oklch(0 0 0 / 0.4),
			0 -0.4mm 0 oklch(0 0 0 / 0.4);
		z-index: 99;

		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 3mm;
			bottom:-3mm;
			left: 0;
			background-image: linear-gradient(to bottom, lch(0 0 0 / 0.05) 5%, lch(100% 0 0 / 0.04) 40% 50%, lch(0 0 0 / 0.00));
		}
	}
	#hinge-middle {
		width: 80mm;
		height: 100%;
		display: flex;
		flex-grow: 0;
		align-items: center;
		justify-content: center;
		z-index: 9;
		filter: drop-shadow(0mm 2mm 2mm oklch(0 0 0 / 0.3));

		#camera {
			background: radial-gradient(#000 50%,#333);
			width:4mm;
			border-radius: 50%;
			aspect-ratio: 1/1;
			margin:0 3mm;
		}
		#mic {
			background: #000;
			width:2mm;
			border-radius: 50%;
			aspect-ratio: 1/1;
		}
	}
}
.overlap {
	height: var(--shell-overlap-size);
	max-height: var(--shell-overlap-size);
}
#bottom {
	display: flex;
	flex-direction: column;
	background-color: var(--shell-color);
	box-shadow:
		inset 1mm 1mm 1mm var(--shell-color),
		inset 0mm -2mm 2mm     lch(0 0 0 / 0.2),
		inset 0mm -1mm 1mm     lch(0 0 0 / 0.2),
		inset 0mm -0.5mm 0.5mm lch(0 0 0 / 0.2),
		inset 0mm -0.1mm 0.2mm lch(0 0 0 / 0.2),
		inset 1.5mm  2.5mm  2mm lch(100% 0 0 / 0.2)
	;
	justify-content: center;

	border-radius: var(--shell-outer-border-radius);
	border-top-left-radius : var(--shell-inner-border-radius);
	border-top-right-radius: var(--shell-inner-border-radius);

	.overlap {
		display: flex;
		width:100%;
		background-image: linear-gradient(to right, transparent, rgba(255 255 255 / 0.01));
		border-radius: inherit;

		> * {
			position: relative;
			flex-grow: 1;
			flex-basis: 33%;
		}
		#left_analog {
			position: absolute;
			top : 7mm;
			left: 6mm;
		}
		#screenshot-button {
			width:7mm;
			aspect-ratio: 1;
			background-color: var(--button-color);
			background-image:
				linear-gradient(to bottom, oklch(100% 0 0 / 0.1), transparent 10% 90%, oklch(0 0 0 / 0.3)),
				linear-gradient(to right , oklch(100% 0 0 / 0.1), transparent 10% 90%, oklch(0 0 0 / 0.3))
			;
			position: absolute;
			right:4mm;
			bottom:13mm;
			border-radius: 1mm;
			box-shadow: 0 0 0.1mm 0.2mm oklch(0 0 0);

			&::after {
				content: '';
				height: 85%;
				aspect-ratio: 1;
				position: absolute;
				top: 0.5mm;
				left:0.5mm;
				box-shadow: inset 0 0.2mm 0.5mm rgba(0 0 0 / 0.8), inset 0 -0.2mm 0.4mm oklch(100% 0 0 / 0.4);
				border-radius: 5mm;
			}
		}
		#select-button {
			width : 7mm;
			height: 2mm;
			aspect-ratio: 1;
			filter: drop-shadow(0mm 0.5mm 0.2mm lch(0 0 0 / 0.05))
					drop-shadow( 0.1mm  0.1mm 0 lch(0 0 0))
					drop-shadow(-0.1mm -0.1mm 0 lch(0 0 0))
			        drop-shadow( 0.1mm -0.1mm 0 lch(0 0 0))
					drop-shadow(-0.1mm  0.1mm 0 lch(0 0 0))
			;
			position: absolute;
			right: 4mm;
			top  : 5mm;
			--highlight : lch(70% 0 0 / 0.07);
			--marks: #aaa;
			background-color: var(--button-color);
			border-radius: 0.25mm;
		}
		#start-button {
			width: 7mm;
			aspect-ratio: 1/1;
			filter: drop-shadow(0mm 0.5mm 0.2mm lch(0 0 0 / 0.05))
					drop-shadow( 0.1mm  0.1mm 0 lch(0 0 0))
					drop-shadow(-0.1mm -0.1mm 0 lch(0 0 0))
			        drop-shadow( 0.1mm -0.1mm 0 lch(0 0 0))
					drop-shadow(-0.1mm  0.1mm 0 lch(0 0 0))
			;
			position: absolute;
			left : 4mm;
			top  : 3mm;
			--highlight : lch(70% 0 0 / 0.07);
			--marks: #aaa;

			> * {
				background-color: var(--button-color);
				position: absolute;
				border-radius: 0.25mm;
			}
			> :first-child {
				width: 2mm;
				height: 100%;
				left: calc(50% - 1mm);
				background-image: linear-gradient(to bottom, var(--highlight), transparent 40% 60%, var(--highlight));
			}
			> :last-child {
				height: 2mm;
				width: 100%;
				top: calc(50% - 1mm);
				background-image: linear-gradient(to right, var(--highlight), transparent 40% 60%, var(--highlight));
			}
		}
		#d-pad {
			width: 19.5mm;
			aspect-ratio: 1;
			filter: drop-shadow(0mm 0.7mm 0.7mm oklch(0 0 0 / 0.05))
			        drop-shadow( 0.2mm  0.2mm 0 oklch(0 0 0 / 0.90))
					drop-shadow(-0.2mm -0.2mm 0 oklch(0 0 0 / 0.90))
			        drop-shadow( 0.2mm -0.2mm 0 oklch(0 0 0 / 0.90))
					drop-shadow(-0.2mm  0.2mm 0 oklch(0 0 0 / 0.90))
			;
			position: absolute;
			right :  3mm;
			top   : 28mm;
			--marks: #aaa;

			> * {
				background-color: var(--button-color);
				position: absolute;
				border-radius: 0.5mm;
			}
			> :first-child {
				width: 6.2mm;
				height: 100%;
				left: calc(50% - 3.1mm);
				background-image:
					radial-gradient(circle farthest-side, color-mix(in oklch ,var(--button-color) 90%, #000F) 30%, transparent),
					linear-gradient(to bottom , oklch(100% 0 0 / 0.3), transparent  4% 96%, oklch(0 0 0 / 0.3)),
					linear-gradient(to right, oklch(100% 0 0 / 0.3), transparent 10% 90%, oklch(0 0 0 / 0.5));

				&::before {
					content: "";
					background-color: var(--marks);
					position: absolute;
					top: 10%;
					left: calc(50% - 0.15mm);
					height: 3.5mm;
					width : 0.6mm;
					border-radius: 0.3mm;
				}
				&::after {
					content: "";
					background-color: var(--marks);
					position: absolute;
					bottom: 10%;
					left: calc(50% - 0.15mm);
					height: 3.5mm;
					width : 0.6mm;
					border-radius: 0.3mm;
				}
			}
			> :last-child {
				height: 6.2mm;
				width: 100%;
				top: calc(50% - 3.1mm);
				background-image:
					radial-gradient(circle farthest-side, color-mix(in oklch ,var(--button-color) 90%, #000F) 30%, transparent),
					linear-gradient(to right , oklch(100% 0 0 / 0.3), transparent  4% 96%, oklch(0 0 0 / 0.3)),
					linear-gradient(to bottom, oklch(100% 0 0 / 0.3), transparent 10% 90%, oklch(0 0 0 / 0.5));

				&::before {
					content: "";
					background-color: var(--marks);
					position: absolute;
					top: calc(50% - 0.15mm);
					left: 10%;
					width: 3.5mm;
					height: 0.6mm;
					border-radius: 0.3mm;
				}
				&::after {
					content: "";
					background-color: var(--marks);
					position: absolute;
					top: calc(50% - 0.15mm);
					right: 10%;
					width: 3.5mm;
					height: 0.6mm;
					border-radius: 0.3mm;
				}
			}
		}
	}
	#bottom_middle {
		flex-grow: 0;
		padding-top: 2mm;

		#bottom_digitizer {
			box-sizing: content-box;
			padding: 3mm;
			border-radius: 2mm;
			background-image: linear-gradient(to bottom right, oklch(100% 0 0 / 0.05), transparent);
			position: relative;
			background-color: oklch(100% 0 0 / 0.02);

			&:after {
				content: "";
				width : 100%;
				height: 100%;
				position: absolute;
				top:0;
				left:0;
				border-radius: 2mm;
				background-image: linear-gradient(to bottom right, oklch(100% 0 0 / 0.12), oklch(100% 0 0 / 0.01));
				box-shadow: -0.2mm -0.3mm oklch(0% 0 0 / 0.06), inset 0 0 oklch(0% 0 0 / 0.4), 0.1mm 0.3mm oklch(100% 0 0 / 0.06), inset -0.1mm -0.1mm oklch(0% 0 0 / 0.4);
			}
			#bottom_screen {
				--aspect-ratio : calc(640 / 512);
				--circle : calc(sqrt(pow(var(--aspect-ratio), 2) + 1));
				--size   : calc(4.0 * 25.4 * 1mm);
				--height : calc(var(--size)   / var(--circle));
				--width  : calc(var(--height) * var(--aspect-ratio));
				background-color: #252424;
				background-image: url("./img/screen/bottom_640x480.png");
				background-size: cover;
				background-position: top;
				background-repeat: no-repeat;
				border: 0.1mm solid #252424;
				height: var(--height);
				width : var(--width);
				border-radius: 1mm;
			}
		}
	}
	#home-buttons {
		width:7mm;
		aspect-ratio: 1;
		background-color: var(--button-color);
		position: absolute;
		left:4mm;
		bottom:13mm;
		border-radius: 5mm;
		box-shadow: 0 0 0.1mm 0.2mm oklch(0 0 0);

		&::after {
			content: '';
			height: 100%;
			aspect-ratio: 1;
			position: absolute;
			top: 0;
			left:0;
			box-shadow: inset 0 0.2mm 0.5mm rgba(0 0 0 / 0.8), inset 0 -0.2mm 0.4mm oklch(100% 0 0 / 0.2);
			clip-path: polygon(50% 10%, 10% 50%, 25% 50%, 25% 85%, 75% 85%, 75% 50%, 90% 50%);
			background-color: rgba(0 0 0 / 0.2);
		}
	}
	#right_analog {
		position: absolute;
		top  : 28mm;
		left: 3mm;
	}
	#face-buttons {
		position: absolute;
		width: 24mm;
		aspect-ratio: 1;
		top: 6mm;
		right: 5mm;

		> * {
			width : 7.5mm;
			aspect-ratio: 1;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			position: absolute;
			color: #fff;
			text-transform: capitalize;
			background-image:
				radial-gradient(circle at 52% 52%, var(--button-color) 3mm, transparent 4mm 4.5mm),
				linear-gradient(to bottom, lch(100% 0 0 / 0.4) 30%, lch(0% 0 0 / 1))
			;
			box-shadow:
				0 0.5mm 0.5mm lch(0 0 0 / 0.3),
				0 0 0 0.4mm lch(0 0 0 / 1);
			font-size: 4.4mm;
			font-family: Arial, Helvetica, sans-serif;
			filter: drop-shadow(0.6mm 0.6mm 0.5mm oklch(0 0 0 / 0.4));
		}
		#b-button, #x-button {
			left: calc(50% - 3.5mm);
		}
		#a-button, #y-button {
			top: calc(50% - 3.5mm);
		}
		#a-button {
			--button-color: rgb(216, 0, 0);
			right:0;
			bottom:0;
			background-color: var(--button-color);
		}
		#b-button {
			bottom:0;
			--button-color: rgb(206, 193, 0);
			background-color: var(--button-color);
		}
		#y-button {
			--button-color: rgb(11, 155, 1);
			background-color: var(--button-color);
		}
		#x-button {
			--button-color: rgb(0, 63, 237);
			background-color: var(--button-color);
		}
	}
}

.analog_stick {
	width: 21.1mm;
	border-radius: 50%;
	aspect-ratio: 1;
	background-color: rgba(0, 0, 0, 0.1);
	background-image:
	  radial-gradient(circle at 50%,
	  color-mix(in oklab, var(--analog-color) 80%, #000) 31%,
	  #191919 33%,
	   var(--shell-color) 35%,
	    transparent 100%,
		var(--shell-color) 100% ),
	    linear-gradient(to top, lch(100% 0 0 / 0.2) 60%, lch(15% 0 0 / 0.2));
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	box-shadow:
		      0  0.7mm  0.5mm oklch(100% 0 0 / 0.05),
		      0 -0.7mm  0.5mm oklch(  0% 0 0 / 0.05),
		inset 0 -0.7mm  0.5mm oklch(100% 0 0 / 0.05),
		inset 0  0.7mm  0.6mm oklch(  0% 0 0 / 0.02);

	> div {
		position: relative;
		background-color: var(--analog-color);

		background-image:
			radial-gradient(circle at 50% 50%,
				transparent,
				oklch( 0% 0 0 / 0.2)
			),
			linear-gradient(to bottom, lch(100% 0 0 / 0.2), lch(0% 0 0 / 0.2))
		;
		box-shadow:
			0 0.5mm 1mm lch(0 0 0 / 0.2),
			inset 0  0.5mm 0.5mm oklch(100% 0 0 / 0.1),
			inset 0 -0.5mm 0.5mm oklch(  0% 0 0 / 0.2);
		width:14.7mm;
		aspect-ratio: 1;
		border-radius: 50%;
		position: absolute;
		filter: drop-shadow(1mm 1mm 0.5mm oklch(0 0 0 / 0.4));

		&::after {
			content: '';
			display: block;
			position: absolute;
			width:12mm;
			aspect-ratio: 1;
			box-shadow:
				0 0.3mm 1mm oklch(0 0 0 / 0.2), 0 0.7mm 1.3mm oklch(100% 0 0 / 0.2),
				inset 0 0.4mm 1mm oklch(0 0 0 / 0.2), inset 0 -0.4mm 1mm oklch(100% 0 0 / 0.2)
			;
			border: 0.4mm solid transparent;
			border-top-color: oklch(100% 0 0 / 0.05);
			border-inline-color: oklch(100% 0 0 / 0.03);
			box-sizing: border-box;
			background-image:
				radial-gradient(circle at 50% 50%,
				oklch(100% 0 0 / 0.2),
				oklch(  0% 0 0 / 0.0)
				);
			border-radius: 100%;
			top : 1.5mm;
			left: 1.5mm;
		}
	}
}

.IR {
	background: #ba92cc;
	box-shadow: inset 0 0 1mm #a34bcc;
	width:2mm;
	border-radius: 50%;
	aspect-ratio: 1/1;
}

#internals {
	visibility: hidden;
	height: 100%;
	position: absolute;
	top:0;

	.LRA {
		width: 10mm;
		height: 24mm;
		background-color: #939393;
		border-radius: 1mm;
		position: absolute;
		box-shadow: inset 0 0 2px rgba(0 0 0 / 0.5);
	}
	#left_LRA {
		bottom: 23mm;
		left: 4mm;
	}
	#right_LRA {
		bottom: 23mm;
		right: 4mm;
	}
	#battery {
		width: 54mm;
		height: 82mm;
		background-color: #222222;
		border-radius: 1mm;
		position: absolute;
		bottom: 3mm;
		left: 30mm;
		box-shadow: inset 0 0 2px rgba(0 0 0 / 0.5);
		background-image: linear-gradient(to right, oklch(0 0 0 / 0.3), transparent 3% 97%, oklch(0 0 0 / 0.3));
	}
	#usb {
		width: 8.34mm;
		height: 6.2mm;
		background-color: #b2b2b2;
		border-radius: 1mm;
		position: absolute;
		bottom: 84mm;
		left: 84mm;
		box-shadow: inset 0 0 2px rgba(0 0 0 / 0.5);
	}
	#gamecard {
		height:35mm;
		width:33mm;
		background-color: #aaa;
		border-radius: 1mm 3mm 1mm 1mm;
		position: absolute;
		bottom: 1mm;
		right: 42mm;
		box-shadow: inset 0 0 2px rgba(0 0 0 / 0.5);
	}
	#microSD {
		height: 15mm;
		width: 11mm;
		background-color: #1e1e1e;
		border-radius: 1mm 1mm 1mm 1mm;
		position: absolute;
		bottom: 1mm;
		right: 24mm;
		box-shadow:
			inset 0 -0.4mm 0.1mm oklch(0 0 0 / 0.5),
			inset 0  0.1mm 0.1mm oklch(100% 0 0 / 0.1);
	}
	#headphone {
		height:14mm;
		width:3.5mm;
		background-color: #aaa;
		border-radius: 4mm 4mm 0 0;
		position: absolute;
		bottom: 0mm;
		right: 80mm;
		box-shadow: inset 0 0 2px rgba(0 0 0 / 0.5);
	}
	#camera-sensor {
		aspect-ratio: 752/480;
		height: 2.88mm;
		background-color: #000;
	}
	#blower {
		bottom: 44mm;
		right : 39mm;
		width : 38mm;
		height: 36mm;
		border-radius: 1mm 1mm 20mm 20mm;
		background-color: #111;
		position: absolute;
	}
	#heatsink {
		width : 40mm;
		height: 10mm;
		background-color: #aaa;
		position: absolute;
		top : 83mm;
		right: 39mm;
	}
	#sythetic-jet {
		width : 40mm;
		height: 20mm;
		background-color: #333;
		position: absolute;
		bottom: 60mm;
		right: 39mm;
	}
}