body{
	--padding : 20px;

	
	--d: min((100vw - 20px) * 1.2, (100vh - 20px));
	--w: calc(var(--d) * 0.8333333333);
	--h: calc(var(--d) * 1.0);

	overflow: hidden;
	
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
}

div#container{
	position:absolute;
	left: calc((100vw - var(--w)) * 0.5);
	top:	calc((100vh - var(--h)) * 0.5);
	width: var(--w);
	height: var(--h);
	overflow: hidden;
}

div#container>canvas{
	width: 100%;
	height: 100%;
	touch-action: none;
}

body{
	--background-c : #101018;
	--background-2-c : #a58d73;
	--small-piece-c : #4D9DE0;
	--horizontal-piece-c : #E15554;
	--vertical-piece-c : #FFC43D;
	--large-piece-c : #3BB273;
	--frame-c : #FFF;
	
	background-color : var(--background-c);
}


button{
	--size: 1;
	--scaled-w : calc(var(--w) * var(--size));
	border:none;
	font-size : calc(var(--scaled-w) * 0.05);
	padding: calc(var(--scaled-w) * 0.015);
	line-height: 1;
	height: calc(var(--scaled-w) * .08);
	border-radius : calc(var(--scaled-w) * 0.025);
	text-align: center;
	
	background : #8888;
	transition : background 0.25s;
	
	box-shadow: 0 0 calc(var(--scaled-w) * 0.025) #8888;
}

button:hover{
	background : #4448;
}

div.scene{
	position:absolute;
	top:0;left:0;
	width: var(--w);
	height : calc(var(--w) * 1.2);
	outline: 2px solid white;
	outline-offset: -2px;
}

.glow{
	box-shadow: inset 0 0 calc(var(--w) * 0.025) white;
}
.inner-border{
	outline: 1px solid white;
	outline-offset: -1px;
}

#game-container{
	width: var(--w);
    height: var(--w);
    position: absolute;
}

button.game-button, button.level{
	display:inline-block;
	width: calc(var(--w) * .08);
}

button.level{
	position: relative;
	counter-increment: level-num;
	margin: calc(var(--w) * .0375);
	width: calc(var(--w) * .15);
	--size: 1.8;
}
	
button.menu-button{
	display:block;
	width: calc(var(--w) * .8);
	margin: calc(var(--w) * .025) calc(var(--w) * .1);
}

.scene[data-hidden="true"]{
	display:none;
}

div.scene#menu{
	text-align: center;
}

#menu-items{
	margin-top: calc(var(--w) * 0.2);
}

p#menu-title{
	font-size : calc(var(--w) * .25);
	margin : calc(var(--w) * .1);
}
	
*{
	color: white;

	font-family: Arial;
	font-weight: bold;

	user-select: none;
	touch-action:none;
}

div.top>p{
	display: inline-block;
	margin: 0;
	font-size: calc(var(--w) * .14);
	line-height: calc(var(--w) * .16);
}

div.top{
	font-size: calc(var(--w) * .1);
	padding: calc(var(--w) * .02);
}

div.top>button.game-button{
	float:right;
}

div#levels{
	counter-reset: level-num;
	overflow: auto;
	width: calc(var(--w) * .9);
	height: calc(var(--w) * .9);
	padding: calc(var(--w) * 0.05);
	scrollbar-width: none;
	touch-action: pan-y;
}

::-webkit-scrollbar{
	display:none;
	width:0px;
}

button.level::after{
	content: counter(level-num);
	position:absolute;
	font-size: calc(var(--w) * 0.05);
	line-height: calc(var(--w) * 0.05);
	text-align: center;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}
.scene.overlay {
	left: calc(var(--w) * 0.1);
	top: calc(var(--w) * 0.225);
	width: calc(var(--w) * 0.8);
	height: calc(var(--w) * 0.75);
	background: var(--background-c);
}

#level-description-text {
	font-size: calc(var(--w) * 0.03);
	white-space: pre-line;
	
	display: inline-block;
	height: calc(var(--w) * 0.35);
	width: calc(var(--w) * 0.3);
	position: absolute;
	top: calc(var(--w) * 0.05);
	right: calc(var(--w) * 0.05);

	padding: 0 calc(var(--w) * 0.0125);
}

.game-view{
	position:absolute;
	top:0;left:0;
	--s : 0;
	width: calc(var(--s) * 4);
	height: calc(var(--s) * 5);
}

.game-view>div{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
	position:absolute;
	width: calc(var(--width) * var(--s));
	height: calc(var(--height) * var(--s));

	transition: left right;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;

	outline : 2px solid white;
	outline-offset: -1px;

	text-shadow: none;

	--x : 0;
	--y : 0;
	--width: 1;
	--height: 1;

	transform: translate(calc(var(--x) * var(--s)), calc(var(--y) * var(--s)));
}

.game-view>div[data-x="0"]{--x : 0}
.game-view>div[data-x="1"]{--x : 1}
.game-view>div[data-x="2"]{--x : 2}
.game-view>div[data-x="3"]{--x : 3}
.game-view>div[data-y="0"]{--y : 0}
.game-view>div[data-y="1"]{--y : 1}
.game-view>div[data-y="2"]{--y : 2}
.game-view>div[data-y="3"]{--y : 3}
.game-view>div[data-y="4"]{--y : 4}
.game-view>div.l-piece[data-y="6"]{--y : 6}

.game-view>div::after{
	position:absolute;
	font-size: calc(var(--w) * 0.05);
	line-height: calc(var(--w) * 0.05);
	text-align: center;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	text-shadow: 0 0 4px #0006;
}

.game-view>div.s-piece{
	background: var(--small-piece-c);
}
.game-view>div.s-piece::after{
	content: "兵";
}
.game-view>div.v-piece{
	background: var(--vertical-piece-c);
	--height: 2;
}
.game-view>div.v-piece::after,
.game-view>div.h-piece::after{
	content: "将";
}
.game-view>div.h-piece{
	background: var(--horizontal-piece-c);
	--width: 2;
}
.game-view>div.l-piece{
	--width: 2;
	--height: 2;
	background: var(--large-piece-c);
}
.game-view>div.l-piece::after{
	content: "曹";
}
	
div[data-blur="true"]{
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
}

.game-view#level-preview>div {
	color: transparent;
}

.game-view#level-preview>div::after {
	text-shadow: none;
}

p#level-description-title{
	font-size: calc(var(--w) * 0.05);
	margin: 0;
	text-align: center;
	padding: calc(var(--w) * 0.025);
	line-height: calc(var(--w) * 0.05);
}

#level-description>div{
	width: calc(var(--w) * 0.8);
	height: calc(var(--w) * 0.475);
	position: relative;
	outline: 2px solid white;
	outline-offset: -2px;
}

#level-description>button {
	position:absolute;
	bottom : calc(var(--w) * .0475);
	width: 20%;
}

button#ls-back{
	left: 15%;
}
button#ls-next{
	right: 15%;
}

.game-view#level-preview{
	display: inline-block;
	position: relative;
	margin: calc(var(--w) * 0.05);
	--s : calc(var(--w) * 0.078125);
}

#game-canvas{
	position: relative;
	margin: calc(var(--w) * 0.1) calc(var(--w) * 0.18);
	outline: calc(var(--w) * 0.06) solid var(--frame-c);
	--s : calc(var(--w) * 0.16);
}

#game>#game-top>button{
	margin-right: calc(var(--w) * .02);
}
#game>#game-top>#game-goto-menu{
	margin-right: 0;
}

#game>#game-top>#info::before{
	content: "Moves:";
}
#game>#game-top>#info{
	font-size: calc(var(--w) * 0.04);
	position: absolute;
	right: calc(var(--w) * 0.02);
	top: calc(var(--w) * 0.12);
}

#game-buttons{
	display: inline-block;
	position: absolute;
	right: calc(var(--w) * 0.02);
	margin-right: calc(var(--w) * -0.02);
}

#game-buttons button {
	margin-right: calc(var(--w) * 0.02);
}
#game-buttons>*{
	float: right;
}
#game-buttons>game-options{
	width: calc(var(--w) * 0.1);
	display: inline-flex;
	float: right;
	height: calc(var(--w) * 0.1);
	overflow: hidden;
}
#game-options>button {
	margin-right: calc(var(--w) * 0.02);
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;
}
#game-options{
	width: 0;
	display: inline-flex;
	float: right;
	height: calc(var(--w) * 0.1);
	overflow: hidden;
	transition: width;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}
#game-options[data-extended="true"]{
	width: calc(var(--w) * 0.2);
	padding-left: calc(var(--w) * 0.025);
	margin-left: calc(var(--w) * -0.025);
	padding-top: calc(var(--w) * 0.025);
	margin-top: calc(var(--w) * -0.025);
}

#game-win>p {
	width: calc(100% - (var(--w) * 0.2));
	padding: 0 calc(var(--w) * 0.1);
	font-size: calc(var(--w) * 0.05);
	margin: calc(var(--w) * 0.05) 0;
}

#game-win>#solved-text {
	text-align: center;
	font-size: calc(var(--w) * 0.1);
}
#game-win>#win-continue {
	text-align: center;
	font-size: calc(var(--w) * 0.055);
	padding: 0;
	width: 100%;
	margin-top: calc(var(--w) * 0.15);
}
#win-moves::before{content: "Moves: "}
#win-hints::before{content: "Hints: "}

div, p {
	text-shadow: 0 0 0.5em;
}

#how-to-play-text{
	padding: calc(var(--w) * 0.1);
	font-size: calc(var(--w) * 0.04);
	text-align: justify;
}

div#game-canvas:before {
	position: absolute;
	content: "";
	display: block;
	top: calc(var(--w) * 0.8);
	left: calc(1px + (var(--w) * 0.16));
	width: calc(50% - 2px);
	height: 10%;
	background: var(--background-c);
}

button.level.diff-Tutorial 		 {background-color: #48f8; box-shadow: 0 0 calc(var(--scaled-w) * 0.025) #48f8}
button.level.diff-Easy			 {background-color: #4f48; box-shadow: 0 0 calc(var(--scaled-w) * 0.025) #4f48}
button.level.diff-Medium		 {background-color: #fc3c; box-shadow: 0 0 calc(var(--scaled-w) * 0.025) #fc3c}
button.level.diff-Hard			 {background-color: #f448; box-shadow: 0 0 calc(var(--scaled-w) * 0.025) #f448}
button.level.diff-Crazy			 {background-color: #84f8; box-shadow: 0 0 calc(var(--scaled-w) * 0.025) #84f8}

button.level.diff-Tutorial:hover {background-color: #36b8}
button.level.diff-Easy:hover	 {background-color: #3b38}
button.level.diff-Medium:hover	 {background-color: #b92c}
button.level.diff-Hard:hover	 {background-color: #b338}
button.level.diff-Crazy:hover	 {background-color: #63b8}