@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

* {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: normal;
	list-style: none;
	vertical-align: top;
	}

body {
	width: 100%;
	height: 100%;
	background: #000;
	font-family: "League Gothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-variation-settings: "wdth" 100;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	}

a {
	color: #9ea3fc;
	}

input, button {
	-webkit-appearance: none;
	border: none;
	background: none;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	}

input:focus {
	outline: 2px solid #c00;
	}

main#controller {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../image/panel_background.jpg?1) no-repeat center top;
	background-size: cover;
	}

main#controller::after {
	content: "";
	position: absolute;
	top: 12.4vh;
	left: 6vw;
	width: 30vw;
	height: 3vh;
	background: radial-gradient(closest-side, rgba(255,255,255,.3), rgba(255,255,255,0));
	pointer-events: none;
	z-index: 10000;
	}

header {
	position: relative;
	width: 100%;
	height: 12vh;
	z-index: 10;
	}

	header img {
		display: block;
		margin: 2vh auto;
		width: 24vh;
		height: 8vh;
		opacity: .7;
		}

footer {
	position: relative;
	width: 100%;
	height: 12vh;
	z-index: 10;
	}

	body.type-iphone-x footer {
		height: 14vh;
		}

header::before,
header::after,
footer::before,
footer::after {
	content: "";
	position: absolute;
	top: 3vh;
	left: 2vh;
	width: 6vh;
	height: 6vh;
	background: url(../image/bolt.png) no-repeat center center;
	background-size: 6vh;
	border-radius: 3vh;
	box-shadow: .5vh 2vh 1vh #000;
	}

header::after,
footer::after {
	right: 2vh;
	left: auto;
	}

#container {
	display: flex;
	align-items: stretch;
	position: relative;
	flex-grow: 1;
	width: 100%;
	height: auto;
	}

	#container::before,
	#container::after {
		content: "";
		position: absolute;
		top: 1vh;
		left: 50%;
		width: 10vh;
		height: 10vh;
		transform: translateX(-50%);
		margin-left: -18vh;
		background: url(../image/vent.png) no-repeat center center;
		background-size: 11vh auto;
		}

	#container::after {
		margin-left: 18vh;
		transform: translateX(-50%) scale(-1,1);
		}

#main-interface {
	flex-grow: 1;
	position: relative;
	margin: 0 4vw;
	padding: 2vh;
	width: auto;
	height: auto;
	background-color: #000;
	box-sizing: border-box;
	border-radius: 8px;
	}

	#main-interface::before {
		content: "";
		position: absolute;
		top: 2vh;
		right: 2vh;
		bottom: 2vh;
		left: 2vh;
		background-color: #111;
		border-radius: 2px;
		z-index: 1;
		}

	#main-interface::after {
		content: "";
		position: absolute;
		top: 2vh;
		right: 2vh;
		bottom: 2vh;
		left: 2vh;
		box-shadow: 0 0 .4vh rgba(255,255,255,1) inset, 0 0 .8vh rgba(255,255,255,.3) inset;
		border-radius: 2px;
		mix-blend-mode: screen;
		background-image: linear-gradient(
			170deg,
			#335,
			#000 4%,
			#224 6%,
			#000 18%,
			#000 90%,
			#211 91%,
			#000 92%,
			#322 94%,
			#000);
		z-index: 100;
		opacity: .5;
		pointer-events: none;
		}

#entry-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 2vh;
	right: 2vh;
	bottom: 2vh;
	left: 2vh;
	padding: 0 4vh 4vh 4vh;
	transition: transform ease-out 300ms, opacity ease-out 300ms;
	transform-origin: 50% 50%;
	transform: scale(.96);
	opacity: 0;
	pointer-events: none;
	z-index: 100;
	}

	body.ios-entry #entry-panel,
	body.android-entry #entry-panel {
		transition: transform ease-out 600ms 300ms, opacity ease-out 600ms 300ms;
		transform: scale(1);
		opacity: 1;
		pointer-events: auto;
		}

#entry-panel p {
	display: none;
	font-family: sans-serif;
	color: #fff;
	font-size: 2.7vh;
	line-height: 4.5vh;
	text-align: left;
	}

body.ios-entry #entry-panel p.ios,
body.android-entry #entry-panel p.android {
	display: block;
	}

#entry-panel p img {
	margin: .3vh .5vh;
	width: 3vh;
	height: 3vh;
	}

#connect-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 2vh;
	right: 2vh;
	bottom: 2vh;
	left: 2vh;
	padding: 0 4vh 4vh 4vh;
	transition: transform ease-out 300ms, opacity ease-out 300ms;
	transform-origin: 50% 50%;
	transform: scale(.96);
	opacity: 0;
	pointer-events: none;
	z-index: 100;
	}

	body.index #connect-panel {
		transition: transform ease-out 600ms 300ms, opacity ease-out 600ms 300ms;
		transform: scale(1);
		opacity: 1;
		pointer-events: auto;
		}

	body.refresh #connect-panel {
		display: none !important;
		}

	#connect-panel.miss {
		animation:rumble 0.4s linear forwards;
		}

@keyframes rumble {
	0%   { transform:translate(0); }
	15%  { transform:translate(3vw); }
	40%  { transform:translate(-3vw); }
	60%  { transform:translate(3vw); }
	85%  { transform:translate(-3vw); }
	100% { transform:translate(0); }
}

#connect-panel img {
	width: 10vh;
	margin-bottom: 3vh;
	transform-origin: 50% 50%;
	animation: rotate-anime 20s linear infinite;
	}

@keyframes rotate-anime {
	0% { transform: rotate(0) }
	100% { transform: rotate(-360deg) }
	}

#connect-panel dl {
	width: 100%;
	}

#connect-panel dl div {
	position: relative;
	margin-bottom: 2vh;
	background-color: rgba(255,255,255,.1);
	border-radius: .5vh;
	}

#connect-panel dt {
	position: absolute;
	top: 0;
	left: 0;
	padding: 1vh 2vh;
	font-size: 4.5vw;
	line-height: 4vh;
	color: #999;
	}

#connect-panel dd {
	}

#connect-panel input {
	width: 100%;
	padding: 1vh 2vh 1vh 22vw;
	font-size: 6vw;
	line-height: 4vh;
	color: #fff;
	}

#connect-panel input[type=submit] {
	display: block;
	width: 100%;
	padding: 1vh 2vh;
	background: #900;
	border-radius: 3vh;
	font-size: 6vw;
	line-height: 4vh;
	color: #fff;
	text-align: center;
	cursor: pointer;
	}

	body.loading #connect-panel button,
	body.main #connect-panel button {
		opacity: .4;
		}

#main-panel {
	display: flex;
	position: absolute;
	top: 2vh;
	right: 2vh;
	bottom: 2vh;
	left: 2vh;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2vh;
	padding: 4vh;
	border-radius: 2px;
	transition: transform ease-out 300ms, opacity ease-out 300ms;
	transform-origin: 50% 50%;
	transform: scale(.96);
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	}

	body.main #main-panel {
		transition: transform ease-out 600ms, opacity ease-out 600ms;
		transform: scale(1);
		opacity: 1;
		pointer-events: auto;
		}

	body.settings #main-panel {
		transition: transform ease-out 300ms, opacity ease-out 300ms;
		opacity: .3;
		}

#main-panel button {
	display: block;
	position: relative;
	width: calc(46vw - 7vh);
	height: calc((100% - 13vh) / 3);
	box-shadow: 0 0 4vh rgba(0,0,0,.6);
	border-radius: 1vh;
	overflow: hidden;
	cursor: pointer;
	}

#main-panel button::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 1vh;
	border: 1px solid rgba(255,255,255,.15);
	will-change: border;
	z-index: 10;
	}

#main-panel button.hover::after {
	animation: hit .8s forwards;
	}

@keyframes hit {
	from { border: 8px solid rgba(192,0,0,.4) }
	to { border: 1px solid rgba(255,255,255,.15) }
}

#main-panel button.slot {
	background: url(../image/empty.gif) no-repeat center center;
	background-size: cover;
	}

#main-panel button.clear {
	flex-basis: 100%;
	height: 7vh;
	}

#main-panel button.clear i {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

	#main-panel button.clear i::before,
	#main-panel button.clear i::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../image/clear.svg) no-repeat center center;
		background-size: 7vh 4vh;
		z-index: 10;
		}

	#main-panel button.clear i::before {
		margin-top: 2vh;
		filter: brightness(0) blur(1vh);
		z-index: 1;
		}

#main-panel button img {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	z-index: 1;
	}

	#main-panel button img.ready {
		display: block;
		}

#settings-overlay {
	display: block;
	position: absolute;
	top: 2vh;
	right: 2vh;
	bottom: 2vh;
	left: 2vh;
	gap: 2vh;
	padding: 4vh;
	transform-origin: 50% 50%;
	transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1), opacity ease-out 300ms;
	opacity: 0;
	pointer-events: none;
	z-index: 50;
	}

	body.settings #settings-overlay {
		opacity: 1;
		pointer-events: auto;
		}

	body.refresh #settings-overlay {
		transform: scale(.85);
		opacity: 0;
		}

#settings-overlay ol {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2vh;
	padding: 4vh;
	}

#settings-overlay li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(46vw - 7vh);
	height: calc((100% - 13vh) / 3);
	transform-origin: 50% 50%;
	transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1);
	transform: scale(.85);
	white-space: nowrap;
	color: #fff;
	}

	body.settings #settings-overlay li {
		transform: scale(1);
		opacity: 1;
		pointer-events: auto;
		}

	body.refresh #settings-overlay li {
		transform: scale(1) !important;
		}

#settings-overlay li.refresh {
	position: relative;
	flex-basis: 100%;
	height: 7vh;
	transform: scale(1);
	line-height: 7vh;
	}

#settings-overlay li.refresh i {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

	#settings-overlay li.refresh i::before,
	#settings-overlay li.refresh i::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../image/refresh.svg) no-repeat center center #111;
		background-size: 7vh 4vh;
		border-radius: 1vh;
		box-shadow: 0 0 0 1px inset rgba(255,255,255,.15);
		z-index: 10;
		}

	#main-panel button.clear i::before {
		margin-top: 2vh;
		filter: brightness(0) blur(1vh);
		z-index: 1;
		}

#settings-overlay li.slot::before {
	content: attr(data-label);
	display: block;
	margin-top: 2vh;
	font-size: 3vh;
	line-height: 3vh;
	color: #ffcfcf;
	}

#settings-overlay var {
	display: flex;
	justify-content: center;
	align-items: end;
	column-gap: .7vh;
	width: 100%;
	font-size: 5.6vh;
	text-align: center;
	line-height: 4vh;
	}

#settings-overlay var::before {
	content: "";
	display: block;
	position: relative;
	margin-right: -.5vh;
	width: 3vh;
	height: 3vh;
	background: url(../image/volume.svg) no-repeat center center;
	background-size: cover;
	fill: #fff;
	}

#settings-overlay var::after {
	content: "%";
	display: block;
	width: 3vh;
	height: 3vh;
	font-size: 3vh;
	line-height: 3vh;
	text-align: left;
	}

#settings-overlay input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0 auto 2vh auto;
	width: 80%;
	outline: none;
	background: transparent;
	cursor: pointer;
	}

#settings-overlay input[type="range"]::-webkit-slider-runnable-track {
	height: 1.6vh;
	background: rgba(255,255,255,.6);
	border-radius: .8vh;
	}

#settings-overlay input[type="range"]::-webkit-slider-thumb {
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	height: 3vh;
	width: 3vh;
	margin-top: -0.7vh;
	background-color: #c00;
	border-radius: 50%;
	z-index: 10;
	}

#loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: opacity 400ms linear;
	opacity: 0;
	pointer-events: none;
	z-index: 1000;
	}

	body.loading #loader {
		opacity: 1;
		pointer-events: auto;
		}

#loader .circle-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -20px;
	fill: transparent;
	stroke: #c00;
	stroke-width: 5;
	animation: dash 2s ease infinite, rotate 2s linear infinite;
	}

@keyframes dash {
	0% {
		stroke-dasharray: 1,95;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -15;
	}
	100% {
		stroke-dasharray: 85,95;
		stroke-dashoffset: -93;
	}
}

@keyframes rotate {
	0% {transform: rotate(0deg) }
	100% {transform: rotate(360deg) }
}

#tab ul {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 2vh;
	position: relative;
	width: 100vw;
	height: 12vh;
	z-index: 100;
	}

body.index #tab ul,
body.ios-entry #tab ul,
body.android-entry #tab ul {
	pointer-events: none;
	filter: brightness(.7);
	}

#tab ul li {
	position: relative;
	}

#tab ul li::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../image/button_off.png) no-repeat 0 0;
	background-size: contain;
	pointer-events: none;
	z-index: 10;
	}

body.main:not(.settings) #tab-main::after,
body.settings #tab-settings::after {
	background: url(../image/button_on.png) no-repeat 0 0;
	background-size: contain;
	}

#tab ul a {
	display: block;
	cursor: pointer;
	}

#tab ul img {
	height: 7vh;
	pointer-events: none;
	box-shadow: 0 .5vh 1vh #000;
	border-radius: 1.45vh;
	}



@media (max-aspect-ratio: 5/8) {

#container::before,
#container::after {
	display: none;
	}

}



@media (min-aspect-ratio: 1) {

#connect-panel {
	padding: 0 24vh 4vh 24vh;
	}

#connect-panel dt,
#connect-panel input {
	line-height: 6vh;
	}

#connect-panel dt {
	font-size: 3vh;
	}

#connect-panel input {
	padding: 1vh 2vh 1vh 12vw;
	font-size: 4vh;
	}

#connect-panel input[type=submit] {
	border-radius: 4vh;
	line-height: 6vh;
	font-size: 5vh;
	}

}