@charset "UTF-8";

/*------------------------------------*\
見た目
\*------------------------------------*/

html {
	background-color: #000;
}
body {
	font-family: 'Audiowide', cursive;
	margin: 0;
	padding: 0;
	color: #fff;
}
strong {
	color: tomato;
}
.m-canvas {
	position: relative;
	padding: 20px;
	text-align: center;
}
/**
 *  初期表示の演出
 */
.m-overlay {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: #000;
	z-index:10;
	-webkit-pointer-events: none;
	pointer-events: none;
}

/**
 *  最初のシーン
 */
.m-initialScene {
	position:absolute;
	top: 20px;
	width: 100%;
	background-color: #000;
}
.m-initialScene-heading {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 40px;
}
.m-initialScene-text {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 20px;
}

/**
 *  プログレスバー
 */
.m-progress {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
}
.m-progress-bar {
	width: 100%;
	height: 3px;
	background-color: #fff;
}

/**
 *  問題入力欄
 */
[class^='q'] {
	margin-top: 100px;
	font-size: 30px;
	font-weight: bold;
	font-family: 'Audiowide', cursive;
	width: 100%;
	text-align: center;
	background-color: #000;
	color: lime;
	border: none;
	border-bottom:3px dashed #ccc;
}
[class^='q']:focus {
	box-shadow: none;
	text-shadow: none;
	outline: none;
	border-color: lime;
}

/**
 *  問題名
 */
.m-title {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	font-size: 20px;
	-webkit-user-select: none;
	user-select: none;
}
[class*="m-title-item"] strong{
	font-size: 25px;
}

/**
 *  注意文
 */
.m-caution {
	color: #555;
	font-size: 20px;
}

/**
 *  最後のシーン
 */
.m-finalScene {
	position:absolute;
	top: 20px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}
.m-finalScene-heading {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 40px;
}
.m-finalScene-text {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 20px;
}

/**
 *  共通
 */
/* ボタン */
.m-button {
	box-sizing: border-box;
	display: inline-block;
	margin: 0;
	padding: 10px;
	border: 3px solid #fff;
	border-radius: 10px;
	font-size: 18px;
	-webkit-transition: .5s all ease-out;
	transition: .5s all ease-out;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
.m-button:hover {
	color: lime;
	-webkit-transition-duration:.2s;
	transition-duration:.2s;
}
.m-button:active {
	color: tomato;
}

/* 初期非表示用 */
.hidden {
	display: none;
}

/*------------------------------------*\
ロジック(?)部分
\*------------------------------------*/

/**
 *  シーン管理
 */

/* NEW GAMEが押されてない時、最初の画面を表示 */
#flag_initialScene:not(:checked) ~ .m-initialScene {
	display: block;
}
/* NEW GAMEが押されてない時、プレイ画面を非表示 */
#flag_initialScene:not(:checked) ~ .m-progress,
#flag_initialScene:not(:checked) ~ .q1,
#flag_initialScene:not(:checked) ~ .m-title {
	display: none;
}
/* NEW GAMEが押された時、プレイ画面を表示 */
#flag_initialScene:checked ~ .m-initialScene {
	-webkit-pointer-events: none;
	pointer-events: none;
}
#flag_initialScene:checked ~ .m-progress,
#flag_initialScene:checked ~ .q1,
#flag_initialScene:checked ~ .m-title {
	display: block;
}
#flag_initialScene:checked ~ .q1 {
	display: inline-block;
}
/* NEW GAMEが押された時、必要なアニメーションを動かす */
#flag_initialScene:checked ~ .m-progress > .m-progress-bar {
	-webkit-animation: -m-progress-bar 10s linear;
	-webkit-animation-fill-mode: forwards;
	animation: m-progress-bar 10s linear;
	animation-fill-mode: forwards;
}
#flag_initialScene:checked ~ .m-initialScene {
	-webkit-animation: .5s -m-initialScene ease;
	-webkit-animation-fill-mode:forwards;
	-webkit-transform: translateX(0);
	animation: .5s m-initialScene ease;
	animation-fill-mode:forwards;
}
#flag_initialScene:checked ~ .m-finalScene {
	-webkit-animation: .5s -m-finalScene ease;
	-webkit-animation-delay: 10s;
	-webkit-animation-fill-mode:forwards;
	animation: .5s m-finalScene ease;
	animation-delay: 10s;
	animation-fill-mode:forwards;
}

/**
 *  入力に成功したら次の問題を表示する
 */
input[pattern]:valid {
	position:absolute;
	top:0;
	left:-9999px;
	display: none;
}
input[pattern]:valid + input[pattern]:invalid{
	display: inline-block;
}

/**
 *  解答数に応じて状態を変化させる
 */

/* 未解答の場合、1問目の題名を表示する */
.m-title > div {
	display:none;
}
.q1:invalid ~
.q2:invalid ~
.q3:invalid ~ .m-title > .m-title-item1 {
	display: block;
}
/* 1問問目までクリアの場合2問目の題名を表示する */
.q1:valid ~
.q2:invalid ~
.q3:invalid ~ .m-title > .m-title-item2 {
	display: block;
}
/* 2問目までクリアの場合3問目の題名を表示する */
.q1:valid ~
.q2:valid ~
.q3:invalid ~ .m-title > .m-title-item3 {
	display: block;
}
/* 全てクリアの場合、プログレスバーを非表示にし、ゲーム終了画面を表示する */
.q3:valid ~ .m-progress {
	display: none !important;
}
.q3:valid ~ .m-finalScene {
	-webkit-animation-delay:0s !important;
	animation-delay:0s !important;
}
/*最後の問題をクリアしたら問題文を非表示にする*/
.q3:valid ~ .m-title {
	display: none;
}


/* 未回答の場合、ゲーム終了画面のメッセージを変化させる */
.q1:invalid ~ 
.q2:invalid ~ 
.q3:invalid ~ 
.m-finalScene .m-finalScene-result:before{
	content:"Oops!";
}
/* 1問目までクリアの場合、ゲーム終了画面のメッセージを変化させる */
.q1:valid ~ 
.q2:invalid ~ 
.q3:invalid ~ 
.m-finalScene .m-finalScene-result:before{
	content:"You completed 1st stage!";
}
/* 2問目までクリアの場合、ゲーム終了画面のメッセージを変化させる */
.q1:valid ~ 
.q2:valid ~ 
.q3:invalid ~ 
.m-finalScene .m-finalScene-result:before{
	content:"You completed 2nd stage!";
}
/* 全てクリアの場合、ゲーム終了画面のメッセージを変化させる */
.q3:valid ~ 
.m-finalScene .m-finalScene-result:before{
	color: gold;
	content:"Congratulations!";
}

/*------------------------------------*\
アニメーション部分
\*------------------------------------*/

/**
 *  初期表示の演出
 */
.m-overlay {
	-webkit-animation: .5s -m-overlay ease;
	-webkit-animation-fill-mode:forwards;
	-webkit-transform: translateX(0);
	animation: .5s m-overlay ease;
	animation-fill-mode:forwards;
	transform: translateX(0);
	opacity: 1;
}
@-webkit-keyframes -m-overlay {
	99% {
		-webkit-transform: translateX(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}
@keyframes m-overlay {
	99% {
		transform: translateX(0);
		opacity: 0;
	}
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

/**
 *  プログレスバー
 */

@-webkit-keyframes -m-progress-bar {
	50% {
		background-color: tomato;
	}
	100% {
		width: 0%;
		background-color: red;
	}
}
@keyframes m-progress-bar {
	50% {
		background-color: tomato;
	}
	100% {
		width: 0%;
		background-color: red;
	}
}

/**
 *  最初の画面
 *  ゲームスタートしたら消える
 */
.m-initialScene {
	transform: translateX(0);
	opacity: 1;
}
@-webkit-keyframes -m-initialScene {
	1% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	99% {
		opacity: 0;
		-webkit-transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}
@keyframes m-initialScene {
	1% {
		opacity: 1;
		transform: translateX(0);
	}
	99% {
		opacity: 0;
		transform: translateX(0%);
	}
	100% {
		opacity: 0;
		transform: translateX(-100%);
	}
}

/**
 *  ゲームオーバー画面
 *  10秒後に画面を覆います
 */
.m-finalScene {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0;
}
@-webkit-keyframes -m-finalScene {
	1% {
		-webkit-transform: translateX(0);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 1;
	}
}
@keyframes m-finalScene {
	1% {
		transform: translateX(0);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}