@import url(./css/news.css);
@import url(./css/journal.css);
@import url(./css/miiverse.css);
@import url(./css/eshop.css);
@import url(./css/controls.css);
@import url(./css/settings.css);

@font-face {
	font-family: 'Nintendo Switch UI';
    font-style: normal;
    font-weight: 300;
    src: local('Nintendo Switch UI'), url('./font/NINTENDOSWITCHUI.woff2') format('woff2');
}

* {margin:0;padding:0;list-style:none;box-sizing: border-box;font-weight: 400;}

html {
	background:#000;
	height:100vh;
	font-family: 'Nintendo Switch UI', sans-serif;

	&#dark-mode {
		--base-shader: #000;
	}
	body {
		overflow: hidden;
		contain: paint;
		aspect-ratio: 16/9;
		max-height: 100vh;
		width: min(1280px, 100vw);
		margin: auto;
		container-type: size;
	}
}
.horizontal-layout {
	writing-mode: vertical-lr;
}
.vertical-layout {
	writing-mode: horizontal-tb;
}
.userpic {
	border-radius:50%;
	background:rgb(171 55 186);
	contain: paint;
	display: flex;
	justify-content: center;
	aspect-ratio: 1;
	box-shadow: 0 0 0.4cqh rgba(0 0 0 / 0.3);
}
#currentUser {
	position: absolute;
	top: 2cqh;
	left: 2cqh;
	width: 5.5cqw;
	z-index: 999;

	.userpic {
		border:0.8cqh solid #fff;
		width:100%;
	}
}
#navbar {
	position: absolute;
	left:0;
	top:0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3cqb;
	inline-size: 8cqw;
	padding-block: max(6.5cqb,12cqh) min(5cqb,5cqh);
	min-inline-size: 10cqh;
	block-size: 100cqb;
	z-index: 999;
	filter: drop-shadow(0 0 2cqh oklch(0 0 0 / 0.2));

	.selected {
		position: relative;
		background-color: inherit;
		svg {
			scale:105%;
		}
	}
	#applets {
		display: flex;
		flex-direction: column;
		max-block-size: 80cqh;

		> a {
			display: flex;
			align-items: center;
			flex: 0 0 11cqb;
			padding-inline: 2.2cqb;
			padding-block: 0.5cqi;
			writing-mode: horizontal-tb;

/* 			.out {
				fill:#fff;
			} */
			&:hover {
				[id$=-icon] {
					scale:105%;
				}
			}
			[id$=-icon] {
				width: 100%;
				min-width: 8cqb;
				position: relative;
				transition: scale 250ms;
				filter: drop-shadow(0 0 3cqi oklch(0 0 0 / 0.15));
			}
		}
	}
	#system-area {
		writing-mode: horizontal-tb;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		time {
			font-weight: 700;
			font-size: 2.5cqh;
			-webkit-text-stroke: 0.4cqh #fff;
			position: relative;
			paint-order: stroke fill;
		}
	}
}
#pages {
	height: 100cqh;
	width : 100cqw;
	position: absolute;
	top:0;
	left:0;
	display: none;

	&.show_preview {
		display: block;

		> .selected {
			opacity: 100%;
		}
	}
	> * {
		width : 100%;
		height: 100%;
		padding-inline: 8cqi 0;
		padding-inline: max(8cqi, 14cqh) 0;
		position: absolute;
		z-index: 9;
		opacity: 0%;
		transition: opacity 300ms ease-in-out 100ms;

		main {
			height:100%;
			width: 100%;

			.wrap {
				max-width: 80cqw;
				height: 80cqh;
				margin: 0 auto;
				writing-mode: horizontal-tb;
				//padding: 2cqh 2cqw 0;
				width:100%;
			}
			.title {
				color: var(--accent-color);
				font-size: 4.45cqh;
				display: flex;
				gap: 1cqh;
				align-items: center;
				line-height: 2em;
				font-weight: 700;
				color: #fff;

				 img {
					height: 6cqh;
				}
			}
			.description {
				line-height: 2cqh;
				font-size: 2.8cqh;
				margin-bottom: 2.5cqh;
				color: #fff;
			}
		}
	}
}
#home-menu {
	display: flex;
	justify-content: flex-end;
	width: 100cqw;
}
.vertical-layout {
	#home-menu {
		padding-block: 10cqb;
	}
	#gamelist {
		> ul + ul {
			margin-block: min(6cqi, 3.5cqb) 0;
			margin-block: min(12cqi, 7cqb) 0;
		}
		> ul {
			flex-basis: 100cqh;
			block-size: 115cqb;
		}
	}
}
.horizontal-layout {
	#home-menu {
		// padding-block: 13cqb;
		padding-top: 14cqh;
	}
	#gamelist {
		> ul + ul {
			margin-inline: min(6cqi, 3.5cqb) 0;
			margin-inline: min(12cqi, 7cqb) 0;
		}
		> ul {
			flex-basis: 100cqw;
			block-size: 100cqb;
		}
	}
}
#gamelist {
	padding-block: max(8cqi, 13cqb);
	box-sizing: content-box;
	flex-grow: 1;
	overflow: hidden;
	container-type:size;

	& ul {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2.5cqh;
		transition: scale 250ms, filter 250ms;
		writing-mode: horizontal-tb;
		container-type:size;
		aspect-ratio: 5/3;
		block-size: 100cqb;
		margin-inline: auto;

		& li {
			padding: 2cqh;
			aspect-ratio: 1;

			&:empty {
				opacity: 0.4;
			}
			& img {
				width:100%;
				display:block;
			}

		}
		&.selected {
			li {
				position: relative;

				&:hover, &.selected {

					&::after {
						content: "";
						display: block;
						position: absolute;
						top:0;
						left:0;
						right:0;
						bottom:0;
					}
				}
			}
		}
	}
}
.pagination {
    display: flex;
	flex-direction: column;
    justify-content: center;
	gap: 1cqw;
	padding: 1.4cqw;
	flex: 0 0 4cqw;

	* {
		aspect-ratio: 1;
		transition: background-color 250ms, scale 250ms;
	}
	.selected {
		scale:120%;
	}
}
#time {
    position:absolute;
    right:10%;
    top:40%;
    font-family:Ariel,sans-serif;
    font-weight:700;
    font-size:140%;
    color:#fff;
}