<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
body {
	width: 480px;
	margin: auto auto;
	background: darkkhaki;
}

.reversi_board{
	position:relative;
	display: grid;
	width: 400px;
	height: 400px;
	background: #666;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	grid-gap: 2px;
	border: 4px #000 solid;
}

.reversi_board div{
	background-color: #0d0
}

.reversi_board .white{
	color: white;
	font-size: 48px;
	line-height: 46px;
}
/*
*/
.reversi_board .blank{
	color: #0d0;
}

.reversi_board .black{
	color: black;
	font-size: 48px;
	line-height: 46px;
}


.reversi_board .message_bar{
	position:absolute;
	top:0px;
	left:0px;
	width:296px;
	min-height:15px;
	height:auto;
	border:4px solid #000000;
	background-color: #efefef;
}

.reversi_board .message_dialog{
	position:absolute;
	color:yellow;
	border:4px solid #efefef;
	margin: auto;
	min-height:80px;
	height: auto;
	border-radius: 50px 50px 50px 50px;
	padding: 3px;
	background: rgba(50,50,100,0.5);
}

 .reversi_board .message_dialog h2{
	text-align: center;
	line-height: 9px;
 }
 .reversi_board .message_dialog h3{
	text-align: center;
	line-height: 8px;
 }

 .reversi_board .message_dialog p{
	text-align: center;
	font-size:12px;
	line-height: 8px;
}</pre></body></html>