html, body, pre, code, kbd, samp {
	font-family: "Press Start 2P", system-ui;
}

body {
	background-color: #000000;
	
	* {
		user-select: none;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
	}
}


main {
	max-width: 400px;
	margin: 0 auto;
}

header {
	padding: .5rem;
	display: flex;
	justify-content: space-between;
}


.material-symbols-outlined {
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48;
	
	color: #ffffff;
	font-size: 3vw;
}

.emulator {
	background: #000000;
	width: 100%;
	/*height: 100vh;*/
	display: flex;
	flex-direction: column;
}

.emulator .screen_wrap{
	position: relative;
}
.emulator .screen_wrap img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
}

.emulator .screen {
	aspect-ratio: 4 / 3;
	z-index: 1;
	position: relative;
	background: transparent;
}

.controller {
	flex-grow: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.icon_wrap {
	padding: 1vw;
}

.screen_wrap {
	border: solid 1px #ffffff;
}

.screen {
	width: 100%;
	display: block;
}


.middle_wrap {
	display: flex;
	padding: 2rem .5rem;
	
	& > * {
		width: 50%;
	}
	
	.arrow_wrap {
		position: relative;
		aspect-ratio: 1 / 1;
		/*width: calc(70px * 3);*/
		/*height: calc(70px * 3);*/
		display: flex;
		flex-wrap: wrap;
		
		.arrow_button_wrap {
			
			/*position: absolute;*/
			width: 33.3333%;
			
			&.top {
				
				.arrow_button {
					border-top-left-radius: 10px;
					border-top-right-radius: 10px;
				}
			}
			
			&.left {
				
				.arrow_button {
					border-top-left-radius: 10px;
					border-bottom-left-radius: 10px;
				}
			}
			
			&.right {
				.arrow_button {
					border-top-right-radius: 10px;
					border-bottom-right-radius: 10px;
				}
			}
			
			&.bottom {
				.arrow_button {
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
				}
			}
		}
	}
	
	.command_wrap {
		aspect-ratio: 1 / 1;
		display: flex;
		flex-wrap: wrap;
		
		.command_button_wrap {
			width: 50%;
			aspect-ratio: 1 / 1;
			padding: .5rem;
			
			.command_button {
				width: 100%;
				aspect-ratio: 1/1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
			}
		}
	}
}

.bottom_wrap {
	display: flex;
	justify-content: center;
	
	.button_wrap {
		padding: .5rem;
		
		.cbtn {
			font-size: .8rem;
			display: inline-block;
			padding: .2rem .5rem;
			border-radius: 20px;
		}
	}
}


.controller .controll_btn {
	color: #000000;
	border: solid 2px rgba(122, 122, 122, 1);
	background-color: #494949;
}

.controller .command_button {
	color: #000000;
	border: solid 2px rgba(122, 122, 122, 1);
	background-color: #ac2438;
}

#select_button, #start_button {
	color: rgba(122, 122, 122, 1);
	border: solid 2px rgba(122, 122, 122, 1);
	background-color: #000000;
}

.arrow_button {
	font-size: 50px;
	display: inline-block;
	width: 100%;
	height: 100%;
	position: relative;
}

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


/* モーダルの背景 */
.modal {
	display: none; /* デフォルトでは非表示 */
	position: fixed; /* 画面に固定 */
	z-index: 1; /* 他の要素の上に表示 */
	left: 0;
	top: 0;
	width: 100%; /* 全幅 */
	height: 100%; /* 全高さ */
	overflow: auto; /* スクロール可能 */
	background-color: rgb(0, 0, 0); /* 背景色 */
	background-color: rgba(0, 0, 0, 0.4); /* 透過 */
}

/* モーダルコンテンツ */
.modal-content {
	margin: 5rem auto; /* 中央に配置 */
	padding: 1.5rem;
	width: 90%; /* 幅 */
	
	.modal_top_wrap{
		display: flex;
		justify-content: end;
	}
}

.nes-container{
	padding: 1rem;
}
header .nes-btn{
	background-color: #000000;
	color: #494949;
	border-image-width: 1;
}
header .nes-btn:hover{
	color: #494949;
	background-color: #000000;
}
header .nes-btn::after{
	content: none;
}
header #saveModal_button img{
	width:50px;
	height: 50px;
}
header #saveModal_button {
	display: flex;
	justify-content: center;
	align-items: center;
}
#saveModal .save_name{
    margin-bottom: 0;
    display: block;
    width: 100%;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}