body{
	background:lightblue; font-size: 100%;
}

div.details{
	position:absolute; top:0px; left:0px;
	backgroud: red;
	padding: 0px; display: block;
	width: 100%; max-height: 120px;
	height: calc((100% - 316px) /2);
}
.details .user, .details .bot{
	position:relative; width: 49%;
	box-sizing:border-box; height: 60%;
	display:inline-block; font-size:29px;
	float: left; padding: 0px 5% 0px 5%;
}
.details .bot{	
	width: 50%;
	border-left: 1px dashed black;
	text-align: right;  float: right;
}

.user i, .bot i{
	font-size: 0.6em; position:absolute;
	height: 1em; margin-top: 0.4em;
	right: 0%; top:0%; 
}
.bot i{ left: 1%; right:auto; }

.user b{ float: right; color: blue; }
.bot b{ float: left; color: blue; }

.details span:last-child{
	display:block; font-size: 13px;
	font-style:italic; padding: 10px;
	box-sizing:border-box;
}
.details .info_bot{ text-align:right; }
.details .info_user{ text-align:left; }
.details .info_user:after, .details .info_bot:before{ content:"..."; }


div.outcome{
	position:absolute; display:block;
	width: 288px; height: 0px;
	overflow:hidden; letter-spacing:3px;
	text-align:center; font-size: 17px;
	left: calc((100% - 288px) /2);
	bottom: calc((100% + 288px) /2);
	text-transform:uppercase; z-index:1;
}
.outcome span{
	display: block; position:absolute;
	width: 20%; height:100%; left: -20%;
	top:0%; transform:skewX(-20deg);
	background: linear-gradient(90deg, transparent 20%, rgba(250, 250, 250, 0.65) 50%, transparent 80%);
	animation: 2.5s slide linear infinite;
	webkit-animation: 2.5s slide linear infinite;
}
@keyframes slide{
	100% { left: 100%; }
}
@-webkit-keyframes slide{
	100% { left: 100%; }
}

div.board{
	width: 288px; height: 288px;
	left: calc((100% - 288px) /2);
	top: calc((100% - 288px) /2);
	box-sizing: border-box;
	position: absolute; background: #fff;
	overflow: hidden; text-align:center;
}
.board .row{
	height: 33.3%; display: block;
}
.row *{
	display:inline-block; width: 33.3%;
	position: relative; margin: 0px;
	height: 100%; float: left;
	box-sizing: border-box;0
	text-align: center;
	text-decoration: none;
	font-size: 5rem; line-height: 96px;
}

.board .row:nth-child(2){
	border: 3px solid black; 
	border-width: 3px 0px 3px 0px;
}
.board ins:nth-child(2){
	border: 3px solid black; 
	border-width: 0px 3px 0px 3px;
}
.board .row:nth-of-type(odd) ins:nth-of-type(odd), .board .row:nth-of-type(2) ins:nth-of-type(even){
	background: rgba(71, 121, 196, 0.09);
}

.board .row:not(:last-of-type) *:not(:last-of-type)::after{
	content: " "; background:white;
	padding:6px; position:absolute;
	display:block; top: calc(100% - 3px);
	left: calc(100% - 3px); z-index:1;
	border-radius:6px;
}


button{
	float:left; display:block;
	color:white;
	padding: 11px; background: #aaa;
}


div.input{
	width: 104px; height: 40px; top: 50%;
	border: 2px solid black; left: 33%;
	display: none; z-index:2;
	position:absolute; overflow:visible;
}
.input .options{
	position: absolute; height: 100%;
	bottom: 0px; left: 0px; width: 100%;
	font-size: 2rem; text-align: center;
	line-height: 40px; overflow:hidden;
	z-index: 2; background: #bbb;
}
.options b{
	position:absolute; width:50%; 
	left: 0px; bottom: 0px; color: #000;
}
.options b:nth-child(2){
	left:50%; border-left: 2px solid #000;
	color: #888;
}
.input .arrow{
	left: calc(50% - 12px); display: none;
	display:inline; position:fixed;
	border: 12px solid black; margin:0px;
	border-color: transparent transparent black transparent; z-index:1;
}


.settings{
	width: 100%; height: 15%; bottom:0px;
	background: lightskyblue; left: 0px;
	min-height: 40px; position:fixed;
	border-radius: 15px 15px 0px 0px;
	border-top: 4px solid #000;
	box-sizing:border-box;
	overflow:hidden; 
}
.settings span:first-of-type{
	position: relative; font-size: 22px;
	padding-left: 20%; display:block;
	padding-top: 8px; line-height: 16px;
	border-bottom: 2px solid black;
	box-sizing:border-box; height: 34px;
}
.settings span button{
	display: block; position:absolute;
	right: 0px; top: 0px; height: 100%;
	width: 22%; font-size: 1.2rem;
	text-align:center; line-height: 10px;
	background: rgba(7, 25, 250, 0.1);
	border: none; outline: none;
	border-left: 2px solid black;
}
.settings span button:hover, .settings span button:active{
	background: #3333cc; outline: none;
}
.settings span:nth-of-type(2){
	display: block; min-height: 64px;
}
.settings span:nth-of-type(2) section{
	display:inline-block; width: 33%;
	display: relative; height: 100%;
	text-align:center; font-size: 20px;
	border-left: 1px solid black;
	box-sizing:border-box;
}
.settings span section:first-of-type{
	border-left: none;
}
.settings span section:active{
	background: #3366cc;
}
.settings span section.selected{
	background: #3366cc;
}