* {
	margin:0;
	padding:0;
	
	box-sizing:border-box;
}

body {
	background:#eee;
}

h1 {
	padding:1em;
	text-align:center;
}

#app { font-size:0; }

#app {
	text-align:center;
}

#app >ul {
	display:inline-block;
	
	margin:0 auto;
	vertical-align:top;
}

html { font-size:3.6vw; }
#app >ul { width:50vw; }
#app >ul >li { width:50vw; height:50vw; }
#app >ul >li >.clickable { width:46vw; height:46vw; margin:2vw; }

@media only screen and (orientation: landscape) {
html { font-size:1.8vw; }
#app >ul { width:100vw; }
#app >ul >li { width:25vw; height:25vw; }
#app >ul >li >.clickable { width:23vw; height:23vw; margin:1vw; }
}

@media only screen and (orientation: landscape) and (min-width: 1080px) {
html { font-size:18px; }
#app { margin-top:20px; }
#app >ul { width:1000px; display:block; }
#app >ul >li { width:250px; height:250px; }
#app >ul >li >.clickable { width:230px; height:230px; margin:10px; }
}




#app >ul >li {
	display:inline-block;
	font-size:1rem;
	
	vertical-align:top;
	
	background-color:#999;
	background-size:100%;
	border:solid 1px #eee;
}

#app >ul >li >.clickable {
	display:block;
	
	border:dashed 0.5rem #fff;
    padding:1rem;
	
	color:#fff;
}

#app >ul >li.main >.clickable {
	border-color:#ff0;
	color:#ff0;
}
#app >ul >li.mixed >.clickable {
	border-color:transparent;
	color:#000;
}

#app >ul >li[style] >.clickable {
	opacity:0;
}


#app .hint {
	overflow-y:auto;
	padding:0.5rem;
    text-align:justify;
    background-color:#ccc;
    color:#333;
}

#app .hint >div >p {
	margin-bottom:0.5rem;
}

#app .hint button {
	display:block;
	
	margin:0.5rem auto;
	padding:0.5em;
}

#app .hint >div {
	display:none;
}

#app[state="1"] .hint >div[state="1"],
#app[state="2"] .hint >div[state="2"],
#app[state="3"] .hint >div[state="3"],
#app[state="4"] .hint >div[state="4"] {
	display:block;
}

#app[selectedMixed] >ul >li.mixed {
	filter:brightness(0.5);
}

#app[selectedMixed="0"] >ul >li.mixed[i="0"],
#app[selectedMixed="1"] >ul >li.mixed[i="1"],
#app[selectedMixed="2"] >ul >li.mixed[i="2"] {
	filter:brightness(1);
}