.top-img{
	background:#bff6;
}
.top-img.topf{
	display:none;
}


.top-img{
	max-height:90dvh;
}

.top-img .arena{
	position:absolute;
	top:-3000px;
	bottom:-3000px;
	left:0;
	right:0;
	margin:auto;
	width:600px;
	height:600px;

border:2px solid #ff0;

}

.top-img .arena .main-wrap{
	position:absolute;

	transform-origin:0 0;
	scale:0.3;

	width:4400px;
	height:2400px;

	left:-360px;
	top:-60px;

	background-image:url(map/bgmap.jpg);
	background-position:1200px 200px ;

//opacity:0.7;

}

.top-img .arena .main{

	position:absolute;
	transform-origin:0 0;

	width:2000px;
	height:2000px;

	left:1200px;
	top:200px;
}

.top-img .arena .main .layer{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;

/*	background:#f005;*/

}

.top-img .btn-play-overlay{
	position:absolute;
	width:10%;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	cursor:pointer;
}


.interface{
	position:absolute;
	width:600px;
	max-width:95dvw;
	left:0;
	right:0;
	bottom:35px;
	margin:0 auto;
	text-align:center;
	line-height:1;
	user-select: none;
}

.interface .append{
	position:absolute;
	right:100%;
	bottom:0;
	width:150px;
	text-align:right;
}

.interface .append .timecount{
	display:inline-block;
	background: #0009;
	font-size:16px;
	vertical-align:top;
	padding:3px 5px;
}

.interface span[class^="btn"]{
	display:inline-block;
	margin:0;
	padding:0;
	font-size:25px;
	cursor:pointer;
}

input[type="range"]{
	width:calc(100% - 40px);
	height:20px;
	margin:3px 0 0;
	padding:0;
}


.interface2{
	position:absolute;
	width:600px;
	max-width:95dvw;
	left:0;
	right:0;
	bottom:70px;
	margin:0 auto;
	text-align:right;
	line-height:1;
	user-select: none;
}
.interface2 span[class^="btn"]{
	display:inline-block;
	margin:0;
	padding:0;
	font-size:25px;
	width:35px;
	text-align:left;
	cursor:pointer;
}
.interface2 input[type="range"]{
	margin-right:3px;
	width:120px;
	max-width:calc(100% - 40px);
}


.top-img .finish-overlay{
	position:absolute;
	width:30%;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	display:none;
}



.main .layer.map{
	z-index:5;
}
.main .layer.sight.t0{
	z-index:10;
}
.main .layer.sight.t1{
	z-index:10;
}
.main .layer.unit{
	z-index:15;
}
.main .layer.sight.line{
	z-index:20;
}

.main .layer{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}


.main .layer.map{
	background-image:url(map/m00.png);
}

.main .ground{
	position:absolute;
	width:100px;
	box-sizing:border-box;
}

.main .map.layer .ground{
	z-index:20;
}

.main .map.layer .ground.edge{
	width:104px;
	z-index:10;
}
.main .building{
	position:absolute;
	width:100px;
	box-sizing:border-box;
}

.main .unit .building{
/*	opacity:0.7;*/
}

/*
.main .chr{
	width:60px;
	height:90px;
	margin-left:-30px;
	margin-top:-70px;
	border-radius:50%;
	border:10px dotted #111;
	position:absolute;
	left:10%;
	top:10%;
}
*/


.main .chr{
	width:90px;
	height:120px;
	margin-left:-45px;
	margin-top:-90px;
	position:absolute;
	left:10%;
	top:10%;
}

.main .chr.shadow{
	opacity:0.3;
}

.main .chr.dead{
	opacity:0.1;
}
.main .chr.team0{
	filter:drop-shadow(0 0 4px #bbf) drop-shadow(0 0 2px #bbf);
}
.main .chr.team1{
	filter:drop-shadow(0 0 4px #fbb) drop-shadow(0 0 2px #fbb);
}


.chr.found{

}
.main .chr.damage{
	filter:drop-shadow(0 0 4px #f00) drop-shadow(0 0 2px #f00);
}
.main .chr.heal{
	filter:drop-shadow(0 0 4px #0f0) drop-shadow(0 0 2px #0f0);
}


.main .chr>div{
	position:absolute;
	top:110px;
	left:-30px;
	white-space:nowrap;
	line-height:1;
	font-size:30px;
	background:#fff4;
}
.main .chr>div:last-child{
	top:80px;
}


.main .sight{
	pointer-events:none;
}

.main .sight.layer.t0,
.main .sight.layer.t1{
	opacity:0.3;
}

.main .sight.layer.t0 svg,
.main .sight.layer.t1 svg{
}

.main .sight.layer.line{
	opacity:0.1;
}

.main .sight svg{
	position:absolute;
	width:120px;
	height:120px;
}

.main .sight svg.dead{
	display:none;
}

.main .sight.t0 svg path{
	fill:#88f;
}
.main .sight.t1 svg path{
	fill:#f88;
}
.main .sight.line svg path{
	stroke:#000;
	stroke-width:1px;
	fill:transparent;
}


.main .sight.layer.t0,
.main .sight.layer.t1{
	opacity:1;
	mix-blend-mode:lighten;

}
.main .sight.t0 svg path{
	fill:#aaf4;
}
.main .sight.t1 svg path{
	fill:#f884;
}


.main .sight.layer.line{
	opacity:0;
}
/*

.main .sight.layer.t0,
.main .sight.layer.t1{
	opacity:1;
	mix-blend-mode:normal;
}

.main .sight.t0 svg path{
	fill:#99f4;
}
.main .sight.t1 svg path{
	fill:#f994;
}


.main .sight.layer.t0,
.main .sight.layer.t1{
	opacity:0.5;
	mix-blend-mode:lighten;
}

.main .sight.t0 svg path{
	fill:#99f;
}
.main .sight.t1 svg path{
	fill:#f99;
}

*/


.right{
	position:absolute;
	right:20px;
	top:50px;

	vertical-align:top;
	display:inline-block;
	margin:0;
	font-size:14px;

	text-align:left;

	color:#000;

	line-height:1.2;
	width:250px;

}

.stat{
	vertical-align:top;
	width:100%;
}

.stat .chr{
	border:1px solid #000;
	border-radius:4px;
	margin: 5px 0;
	padding:5px;
	cursor:pointer;

	overflow:hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}

.stat .chr div{
	display:inline-block;
}

.stat .chr div.hp{
	width:80px;
}

.stat .chr.focus{
	outline:2px solid #0ee;
}

.stat .chr.team0{
	background:#aafc;
}
.stat .chr.team1{
	background:#faac;
}


.action{
	background:#eeeb;
	width:100%;
	height:220px;
	overflow-x:auto;
	overflow-y:auto;

	white-space:nowrap;

	border:1px solid #000;
	vertical-align:top;
	display:inline-block;
	margin:0;


}

.action ruby rt{
	margin:-0.1em 0 -0.3em;
	font-size:0.7em;
}


.box-normal.team0 {
	background-color:#ddfc;
}
.box-normal.team1 {
	background-color:#fddc;
}

.box-normal.team0>h3 ,
.box-normal.team1>h3 {
	overflow:hidden;
}

.box-normal.team0>h3>.btn ,
.box-normal.team1>h3>.btn {
	cursor:auto;
}