*{
	box-sizing:border-box;
}
body{
	margin:0;
	background: radial-gradient(circle, rgba(6,92,55,1) 0%, rgba(0,39,25,1) 100%);
	font-family: 'Poppins';
	color:#fff;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overscroll-behavior-y: contain;
}
#game{
	background: url('../img/pattern.png'),radial-gradient(circle, rgba(6,92,55,1) 0%, rgba(0,39,25,1) 100%);
}
#game-border{
	border:0 solid #fff;
}
#game-area{
	position:relative;
	/* overflow:hidden; */
}
#choose{
	visibility:hidden;
	position: absolute;
	opacity: 0;
	transition: all 0.5s;
	z-index:98;
	color:#2f2f9e;
	font-weight:bold;
	overflow:hidden;
	height:0;
}
#choose div:hover{
	color:#f00;
}
#choose span{
	display:block;
	font-weight:normal;
}
#choose p{
	margin:0;
}
#choose .selected{
    background: url('../img/select.png');
    background-repeat: no-repeat;
    background-size: 10%;
    background-position: 12% 45%;
}
#choose div:nth-child(odd) {
	background-color:#fff;
	width:100%;
	text-align:center;
	cursor:pointer;
}
#choose div:nth-child(even) {
	background-color:#ededed;
	width:100%;
	text-align:center;
	cursor:pointer;
}
.stamp{
	caret-color: transparent;
	cursor: none;
	box-sizing:border-box;
	position: absolute;
	display:inline-block;
	background-color:#fff;
	width:100px;
	height:100px;
	font-size:25px;
	font-weight:bold;
	margin:0;
	text-align: center;
	cursor: pointer;
	transition: all 0.5s;
}
.stamp div{
	pointer-events: none;
}
.point{
    position: absolute;
	border-radius: 50%;
}
.point-mini{
    position: absolute;
	border-radius: 50%;
}
.point2-mini{
    position: absolute;
	border-radius: 50%;
}
.marked{
    background-image: url(../img/marked.svg);
    background-position: center;
    background-size: 82%;
    background-repeat: no-repeat;
}
.red{
	color:#cf1919e8;
}
.blue{
	color:#1919cfd4;
}
.yellow{
	color:#ffa800d9;
}
.green{
	color:#499901d4;
}
.black{
	color:#414141e8;
}

.redBG{
	background:#f00;
}
.blueBG{
	background:#00f;
}
.yellowBG{
	background:#ff0;
}
.greenBG{
	color:#0f0;
}
.blackBG{
	background:#000;
}
.display{
	display:inline-block;
}
#game{
	display:block;
	width:100vw;
}
#game-div{
	position:relative;
	border:0 solid #333;
}
#board{
    position: absolute;
    background: URL("../img/board.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
	z-index:-1;
}
#area-1{
    position: absolute;
    background: #0000002b;
	z-index:0;
}
#area-2{
    position: absolute;
    background: #0000002b;
	z-index:0;
}
#area-3{
    position: absolute;
    background: #0000002b;
	z-index:0;
}
#area-4{
    position: absolute;
    background: #0000002b;
	z-index:0;
}
.drop{
    z-index: 99 !important;
    background: #000a !important;
	cursor:pointer;
    color: #fff;
    text-align: center;
}
#board-2{
    position: absolute;
    background: URL("../img/board-2.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
	transform: rotate(180deg);
}
#board-3{
    position: absolute;
    background: URL("../img/board-3.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
	transform: rotate(180deg);
}
#board-4{
    position: absolute;
    background: URL("../img/board-2.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}
#sort-order{
    position: absolute;
    background: URL("../img/sort-by-order.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
	cursor:pointer;
}
#sort-double{
    position: absolute;
    background: URL("../img/sort-by-double.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
	cursor:pointer;
}
#go-double{
	display:block;
    position: absolute;
    background: URL("../img/go-double.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
	cursor:pointer;
}
#show-stamps{
	display:none;
    position: absolute;
    background: URL("../img/show-stamps.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
	cursor:pointer;
}
#open-double{
	display:block;
    position: absolute;
    background: URL("../img/open-double.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
	cursor:pointer;
}
#open-sort{
	display:none;
    position: absolute;
    background: URL("../img/open-sort.svg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
	cursor:pointer;
}
#handle-sort{
	display:none;
    position: absolute;
    background: URL("../img/button.svg");
    background-size: 98% auto;
    background-repeat: no-repeat;
    background-position: center;
	text-align:center;
    font-family: 'Bebas Neue', cursive;
}
#handle-double{
	display:none;
    position: absolute;
    background: URL("../img/button.svg");
    background-size: 98% auto;
    background-repeat: no-repeat;
    background-position: center;
	text-align:center;
    font-family: 'Bebas Neue', cursive;
}
#collect{
	display:none;
    position: absolute;
    background: URL("../img/button.svg");
    background-size: 98% auto;
    background-repeat: no-repeat;
    background-position: center;
	text-align:center;
    font-family: 'Bebas Neue', cursive;
}
.button-passive{
	color:#555;
	cursor:auto;
}
.button-active{
	color:#fff;
	cursor:pointer;
}
#table-sort{
    position: absolute;
    border: 0 solid #2f5039;
    /* background: URL('../img/table-sort.svg'); */
	background-size:100% 100%;
	overflow: hidden;
	font-size:0;
}
#table-sort .area{
    position: relative;
	display:inline-block;
	background-image: linear-gradient(to right, #80808040 1px, #0001 1px),
    linear-gradient(to bottom, #80808040 1px, #0001 1px);
	border:1px solid #fff;
	overflow:hidden;
}
#table-sort span{
    position: absolute;
	z-index: 99;
    right: 0;
    bottom: 0;
    background: #fff;
    color: #033e25;
    text-align: center;
    opacity: 0.75;
}
#user1-table-sort{
	border-top-left-radius: 3%;
}
#user2-table-sort{
	border-top-right-radius: 3%;
}
#user3-table-sort{
	border-bottom-left-radius: 3%;
}
#user4-table-sort{
	border-bottom-right-radius: 3%;
}
#table-double{
    position: absolute;
    border: 0 solid #2f5039;
    /* background: URL('../img/table-double.svg'); */
	background-size:100% 100%;
    font-size: 0;
}
#table-double .area{
    position: relative;
	display:inline-block;
	background-image: linear-gradient(to right, #80808040 1px, #0001 1px),
    linear-gradient(to bottom, #80808040 1px, #0001 1px);
	border:1px solid #fff;
	overflow:hidden;
}
#table-double span{
    position: absolute;
    background: #fff;
    color: #033e25;
    text-align: center;
    opacity: 0.75;
	rotate: 270deg;
}
#user1-table-double{
	border-top-left-radius: 15% 2%;
	border-bottom-left-radius: 15% 2%;
	
}

#user4-table-double{
	border-top-right-radius: 15% 2%;
	border-bottom-right-radius: 15% 2%;
}
#table-sort-score{
    position: absolute;
    border: 0 solid #2f5039;
    background: URL('../img/table-sort-score.svg');
    background-size: 100% 100%;
	font-weight: bold;
    text-align: center;
}
#table-double-score{
    position: absolute;
    border: 0 solid #2f5039;
    background: URL('../img/table-double-score.svg');
    background-size: 100% 100%;
    font-weight: bold;
    text-align: center;
}
#messageBack{
	display:none;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgb(0,0,0,0.7);
	z-index:98;
}
#messageBack img{
	display:none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#message-box{
	visibility:hidden;
	position: absolute;
	text-align:center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 0s;
	z-index:99;
    background: linear-gradient( 0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%);
}
#close{
	position:absolute;
	font-weight:bold;
	text-align:center;
	border:0 solid #fff;
	padding:0;
	background-color:#b36e00;
	cursor:pointer;
}
#title{
    color: white;
    font-weight: bold;
	color: #36ff00;
}
#body{
	color:white;
}
#footer{
}
.button{
    display: inline-block;
    cursor: pointer;
    font-family: 'Bebas Neue', cursive;
}
.ok{
    background: linear-gradient(180deg, rgba(102,189,32,1) 30%, rgba(53,117,0,1) 57%);
}
.no{
    background: linear-gradient(180deg, rgb(116,116,117)  38%, rgb(96,96,97) 57%);
}
#complete{
    visibility: hidden;
    position: absolute;
    text-align: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0s;
    background: linear-gradient( 0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%);
    z-index: 99;
	font-size:0;
}
#complete-board{
    position: relative;
    background: URL("../img/board.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
#complete-title{
    font-family: 'Bebas Neue', cursive;
}
#complete-title span{
	color:#36ff00;
}
#point-select{
    visibility: hidden;
    position: absolute;
    text-align: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0s;
    background: linear-gradient( 0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%);
    z-index: 99;
	font-size:0;
}
#point-select-board{
	background:#333;
}
#point-select-board span{
    display: inline-block;
    color: #fff;
	cursor:pointer;
	box-sizing: content-box;
}
.point-active{
	background: #2c651b;
}
.point-passive{
	background: #404040;	
}
#points-table{
    visibility: hidden;
    position: absolute;
    text-align: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0s;
    background: linear-gradient( 0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%);
    z-index: 99;
	font-size:0;
}
#points-board{
    position: relative;
}
#points-board .sign{
    color: yellow;
    border: 1px solid yellow;
}
#points-board .sign-red{
    color: red;
    border: 1px solid red;
}
#points-board .sign-green{
    color: #1ed94f;
    border: 1px solid #1ed94f;
}
#points-board-back{
    position: absolute;
}
#points-line-1{
	display:inline-block;
}
#points-line-2{
	display:inline-block;
}
#points-line-3{
	display:inline-block;
}
#points-line-4{
	display:inline-block;
}

.rank-1{
}
.rank-1 div{
    background: URL("../img/rank-1.svg");
    background-repeat: no-repeat;
    background-position: center;
	position: absolute !important;
	z-index:2;
}
.rank-2{
}
.rank-2 div{
    background: URL("../img/rank-2.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
	position: absolute !important;
	z-index:2;
}
.rank-3{
}
.rank-3 div{
    background: URL("../img/rank-3.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute !important;
	z-index:2;
}
.rank-4{
}
.rank-4 div{
    background: URL("../img/rank-4.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
	position: absolute !important;
	z-index:2;
}

#points-first{
    position: absolute;
}
#points-first span{
    display: inline-block;
    text-decoration: underline;
    color: #67bd20;
}
#points-detail{
    position: absolute;
    overflow-y: scroll;
}
#points-detail span{
    display: inline-block;
    color: #fff;
}

#points-last{
    position: absolute;
}
#points-last span{
    display: inline-block;
    color: #fff;
}

#remaining{
    visibility: hidden;
    position: absolute;
    text-align: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0s;
    background: linear-gradient( 0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%);
    z-index: 99;
	font-size:0;
}
#remaining-board{
    position: relative;
}
#remaining-board-back{
    position: absolute;
}
#remaining-line-1{
	background-color:#333;
}
#remaining-line-2{
	background-color:#333;
}
#remaining-line-3{
	background-color:#333;
}
#remaining-line-4{
	background-color:#333;
}
.title1{
    font-family: 'Bebas Neue', cursive;
}
.title1 span{
	color:#36ff00;
}
#intro{
	background: URL("../img/logo.png") #333;
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
	z-index:99;
	position:absolute;
	left:0;
	top:0;
	margin:0;
	right:0;
	width: 100%;
	height: 100%;
	text-align:center;
	font-size:22px;
	font-weight:bold;
	color:#fff;
    display: flex;
    justify-content: center;
    height: 100vh;
	animation: fadeOut ease-in 2s;
	animation-fill-mode: forwards;
}
#pop-message{
    position: absolute;
    display: block;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: poppins;
    text-align: center;
    z-index: 98;
	user-select: none;
	pointer-events: none;
}
.alert{
	background: linear-gradient(0deg, rgb(77,217,69) 0%,rgb(47,182,54) 20%, rgb(47,182,54) 100%, rgb(77,217,69) 80%);
}
.info{
	background: linear-gradient(0deg, rgb(217,77,69) 0%,rgb(182,47,54) 20%, rgb(182,47,54) 100%, rgb(217,77,69) 80%);		
}
@keyframes fadeOut{
  0% {
    opacity:1;
  }
  100% {
    opacity:0.2;
	visibility:hidden;
  }
}

#stamp-counter{
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    border-radius: 50%;
    text-align: center;
    color: #fff;
	background: linear-gradient(180deg, rgba(95,95,95,1) 0%, rgba(24,24,24,1) 100%);
}

.user{
    position: absolute;
    background: #0004;
}

.user .img{
    background: URL("../img/user-1.svg") #fff;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    float: left;
}

.user img{
	width:90%;
}

.active{
	color:#30ff00;
}
.active .img{
    background:conic-gradient(#30ff00 100%, #fff 0%);
	animation-duration: 1s;	
	animation-name: load;
}

.user .score{
	color: yellow;
}

.user span{
    display: block;
}

@keyframes load{
	0%{
		background:conic-gradient(#30ff00 1%, #fff 0%);
		}
	10%{
		background:conic-gradient(#30ff00 10%, #fff 0%);
	}
	20%{
		background:conic-gradient(#30ff00 20%, #fff 0%);
	}
	30%{
		background:conic-gradient(#30ff00 30%, #fff 0%);
	}
	40%{
		background:conic-gradient(#30ff00 40%, #fff 0%);
	}
	50%{
		background:conic-gradient(#30ff00 50%, #fff 0%);
	}
	60%{
		background:conic-gradient(#30ff00 60%, #fff 0%);
	}
	70%{
		background:conic-gradient(#30ff00 70%, #fff 0%);
	}
	80%{
		background:conic-gradient(#30ff00 80%, #fff 0%);
	}
	90%{
		background:conic-gradient(#30ff00 90%, #fff 0%);
	}
	100%{
		background:conic-gradient(#30ff00 100%, #fff 0%);
	}
}

#user-1 .img{
    /* background:conic-gradient(#30ff00 0%, #fff 0%); */
}
#user-2 .img{
    /* background:conic-gradient(#30ff00 0%, #fff 0%); */
}
#user-2.okey-101{
	rotate:90deg;
}
#user-2.okey-101 img{
	/* rotate:270deg; */
}
#user-3 .img{
    /* background:conic-gradient(#30ff00 0%, #fff 0%); */
}
#user-4 .img{
    /* background:conic-gradient(#30ff00 0%, #fff 0%); */
}
#user-4.okey-101{
	rotate:90deg;
}
#user-4.okey-101 img{
	/* rotate:270deg; */
}

#user1-total{	
	background: #24951e;
	text-align: center;
	position: absolute;
    background: url('../img/total-user-blue.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    position: absolute;
	font-weight: bold;
}

#settings{
	position: absolute;
	display:block;
    visibility: hidden;	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    background: linear-gradient( 0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%);
	text-align:center;
	z-index:98;
	color:#fff;
	font-family: 'Bebas Neue';
}
#settings .list{
	width: 96%;
	background: #2c2c2c;
	text-align:left;
}
#settings .list span{
	display: inline-block;
}
#settings .list em{
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-style: normal;
	color:#ddd;
}
.settings-button{
	float: right;
	display: inline-block;
	cursor:pointer;
	width: 20%;
	text-align: center;
}
.settings-active{
	background: URL("../img/settings-button-active.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;
	color: #064725;
}
.settings-passive{
	background: URL("../img/settings-button-passive.svg");
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: center;
	color: #797979;
}
.settings-switch{
	float: right;
	display: inline-block;
	cursor:pointer;
}
.on{
    background: URL("../img/settings-switch-on.svg");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    text-align: left;
	color: #b9b9b9;
}
.off{
    background: URL("../img/settings-switch-off.svg");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    text-align: right;
    color: #c1c1c1;
}
#settings-close{
    background: URL("../img/settings-close.svg");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: center;
    color: #797979;
    position: absolute;
	cursor:pointer;
}

#button-mode{
    position: absolute;
    font-family: 'Bebas Neue';
    text-align: center;
	cursor:pointer;
}
.mode-single{
    background: URL("../img/button-mode-single.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;	
}
.mode-points{
    background: URL("../img/button-mode-points.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;	
}

.button-scores{
    position: absolute;
    font-family: 'Bebas Neue';
    text-align: center;
	cursor:pointer;
    background: URL("../img/button-scores.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;	
}
#button-new{
    background: URL("../img/button-new.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* background: #404040; */
    position: absolute;
    font-family: 'Bebas Neue';
    text-align: center;
	cursor:pointer;
}
#button-settings{
    background: URL("../img/button-settings.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
	
    /* background: #2c651b; */
    position: absolute;
    text-align: center;
    font-family: 'Bebas Neue';
	cursor:pointer;
}

#version{
    position: absolute;
    text-align: center;
}

/* Landscape */
@media (min-aspect-ratio: 1/1){
	.full{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}
	#game{
		overflow:hidden;
		height:100vh;
	}
	#game-border{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.stamp{
		text-shadow: 0 0.4vh 0.4vh #fff, 0 0 0 #000, 0 0.4vh 0.4vh #fff;
		box-shadow: 0 0.3vh 0.3vh #00000060;
		border-radius:0.5vh;
	}
	.point{
		width: 3vh;
		height: 3vh;
		left: calc(50% - 3vh/2);
		bottom: calc(21% - 3vh/2);
		box-shadow: inset 0 0.3vh 0.5vh #0003;
		line-height: 0.7vh;
	}
	.heart{
		width: 1.5vh;
		height: 1.5vh;		
	}
	.point-mini{
		width: 1.5vh;
		height: 1.5vh;
		left: calc(50% - 1.5vh/2);
		bottom: calc(25% - 1.5vh/2);
		box-shadow: inset 0 0.1vh 0.3vh #0003;
		line-height: 0.8vh;
	}
	.heart-mini{
		width: 0.8vh;
		height: 0.8vh;	
	}
	.point2-mini{
		width: 1vh;
		height: 1vh;
		left: calc(50% - 1vh/2);
		bottom: calc(25% - 1vh/3);
		box-shadow: inset 0 0.1vh 0.3vh #0003;
		line-height: 0.8vh;
	}
	.heart2-mini{
		width: 0.6vh;
		height: 0.6vh;		
	}
	#stamp-counter{		
		width: 3vh;
		height: 3vh;
		font-size: 1.5vh;
		line-height: 3vh;
		box-shadow: 0 0.3vh 0.5vh 0 rgb(0 0 0 / 35%), inset 0 0 0.4vh 0.3vh rgb(0 0 0 / 56%);
	}
	#messageBack img{
		width:20vh;
	}
	#message-box{
		width:55vh;
		height:30vh;
		font-size:2.8vh;
		line-height:4.5vh;
		padding:1vh;
		border-radius: 2vh;
		border: 0.2vh solid #1ed94f;
		box-shadow: 0 0 6vh 0 #baff0024;
	}
	#close{
		width:5vh;
		height:5vh;
		line-height:4.5vh;
		font-size:3vh;
		right:1vh;
		top:1vh;
		border-radius: 1vh;
	}
	#title{
		font-size: 5vh;
		line-height:9vh;
	}
	#body{
		height:12vh;
	}
	.button{
		min-width: 20vh;
		height: 5vh;
		line-height: 5vh;
		padding: 0 2vh;
		margin: 0 1vh;
		font-size: 2.7vh;
	}
	.ok{
		text-shadow: 0 0.2vh 0.3vh rgb(0 0 0 / 56%);
		box-shadow: 0 0.3vh 0.5vh 0 #00000056, inset 0 0.1vh 0.5vh 0 #b1ff6b;
	}
	.no{
		text-shadow: 0 0.2vh 0.3vh rgb(0 0 0 / 56%);
		box-shadow: 0 0.3vh 0.5vh 0 #00000056, inset 0 0.1vh 0.5vh 0 #e7e8e8;
	}
	#pop-message{
		padding: 1vh;
		border-radius: 0.4vh;
		font-size:2vh;
		box-shadow: 0vh 0.2vh 0.5vh 0vh rgb(0 0 0 / 50%);
	}
	#complete{
		width: 73vh;
		height: 36vh;
		border-radius: 2vh;
		border: 0.2vh solid #1ed94f;
		box-shadow: 0 0 6vh 0 #baff0024;
	}
	#complete-board{		
		width: 60vh;
		height: 13vh;
		margin: 4vh auto;
	}
	#complete-title{		
		font-size: 4.5vh;
		line-height: 4.5vh;
		margin: 3vh 0 0 0;
	}
	#point-select{
		width: 73vh;
		height: 36vh;
		border-radius: 2vh;
		border: 0.2vh solid #1ed94f;
		box-shadow: 0 0 6vh 0 #baff0024;
	}
	#point-select-board{		
		width: 60vh;
		height: 13vh;
		margin: 4vh auto;
	}
	#point-select-board span{
		width: 7vh;
		margin: 1vh 2vh;
		font-size: 3vh;
		line-height: 4vh;
		height: 4vh;
		box-shadow: inset 0px 0 2vh #000;
		border-radius: 0.5vh;
	}
	.point-active{
		border: 0.3vh solid #55c234;
	}
	.point-passive{
		border: 0.3vh solid #7b7b7b;	
	}
	#points-table{
		width: 74vh;
		height: 53vh;
		border-radius: 2vh;
		border: 0.2vh solid #1ed94f;
		box-shadow: 0 0 6vh 0 #baff0024;
	}
	#points-line-1{
		width: 25%;
		height: 32vh;
		margin-bottom: 1vh;
		border-right: 0.2vh  solid #fff;
	}
	#points-line-2{
		width: 25%;
		height: 32vh;
		margin-bottom: 1vh;
		border-right: 0.2vh  solid #fff;
	}
	#points-line-3{
		width: 25%;
		height: 32vh;
		margin-bottom: 1vh;
		border-right: 0.2vh  solid #fff;
	}
	#points-line-4{
		width: 25%;
		height: 32vh;
		margin-bottom: 1vh;
	}
	#points-board{		
		width: 74vh;
		height: 34vh;
		margin: 2vh auto;
	}
	#points-board-back{		
		width: 68vh;
		height: 34vh;
		margin: 2vh 2vh;
	}
	#points-board-back div{
		position:relative;
	}
	#points-board-back span{
		color: #fff;
		font-size: 2.5vh;
	}
	
	.rank-1{
		border: 0.3vh solid #1ed94f !important;
		height: 34vh !important;
		margin: 0 1vh;
		border-radius: 1vh;
		box-shadow: 0 0 2vh 0 #baff0090;
	}
	.rank-1 div{
		top: -5vh;
		right: -5vh;
		width: 8vh;
		height: 8vh;
	}
	.rank-2{
		border: 0.3vh solid #e8a000 !important;
		height: 34vh !important;
		margin: 0 1vh;
		border-radius: 1vh;
		box-shadow: 0 0 2vh 0 #ffb80890;
	}
	.rank-2 div{
		top: -3vh;
		right: -3vh;
		width: 6vh;
		height: 6vh;
	}
	.rank-3{
		border: 0.3vh solid #86847e !important;
		height: 34vh !important;
		margin: 0 1vh;
		border-radius: 1vh;
		box-shadow: 0 0 2vh 0 #61606090;
	}
	.rank-3 div{
		top: -3vh;
		right: -2vh;
		width: 5vh;
		height: 5vh;
	}
	.rank-4{
		border: 0.3vh solid #86847e !important;
		height: 34vh !important;
		margin: 0 1vh;
		border-radius: 1vh;
		box-shadow: 0 0 2vh 0 #61606090;
	}
	.rank-4 div{
		top: -2vh;
		right: -2vh;
		width: 4vh;
		height: 4vh;
	}
	#points-first{
		font-size: 2.5vh;
		left: 1vh;
		top: 4vh;
	}
	#points-first span{
		width: 7vh;
		margin: 0 5.2vh;
	}
	#points-detail{
		font-size: 2.5vh;
		left: 1vh;
		top: 8.5vh;
		height: 18vh;
		width: 71vh;
	}
	#points-detail span{
		width: 7vh;
		margin: 0 5.2vh;
	}

	#points-detail::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 1vh rgba(0,0,0,0.3);
		background-color: #4c4c4c;
	}

	#points-detail::-webkit-scrollbar{
		width: 1vh;
		background-color: #4c4c4c;
	}

	#points-detail::-webkit-scrollbar-thumb{
		background-color: #5ca321;
	}

	#points-last{
		font-size: 2.5vh;
		left: 1vh;
		top: 28vh;
	}
	#points-last span{
		width: 7vh;
		margin: 0 5.2vh;
		border: 0.2vh solid #ddd;
	}
	#remaining{
		width: 100vh;
		height: 61vh;
		border-radius: 2vh;
		border: 0.2vh solid #1ed94f;
		box-shadow: 0 0 6vh 0 #baff0024;
	}
	#remaining-board{		
		width: 93vh;
		height: 39vh;;
		margin: 4vh auto;
	}
	#remaining-board-back{		
		width: 90vh;
		height: 39vh;;
		margin: 4vh 5vh;
	}
	#remaining-board-back div{
		position:relative;
	}
	#remaining-board-back span{
		position: absolute;
		top: 0;
		left: 0;
		color: #0f0;
		font-size: 1.3vh;
		padding: 0 1vh;
		background: #555;
		border-radius: 0.5vh 0 0 0;		
	}
	#remaining-line-1{
		width:100%;
		height:9.5vh;
		border-radius: 0.5vh;
		margin-bottom:1vh;
	}
	#remaining-line-2{
		width:100%;
		height:9.5vh;
		border-radius: 0.5vh;
		margin-bottom:1vh;
	}
	#remaining-line-3{
		width:100%;
		height:9.5vh;
		border-radius: 0.5vh;
		margin-bottom:1vh;
	}
	#remaining-line-4{
		width:100%;
		height:9.5vh;
		border-radius: 0.5vh;
	}
	.title1{		
		font-size: 4.5vh;
		line-height: 4.5vh;
		margin: 3vh 0 0 0;
		color: #36ff00;
	}
	#board{
		bottom: 0;
		left: 1.5vh;
		width: 130vh;
		height: 28vh;
	}
	#board-2{
		width: 1.55vh;
		height: 30vh;
		right: 0vh;
		top: calc(35% - 30vh/2);
	}
	#board-3{
		width: 30vh;
		height: 1.55vh;
		top: 0;
		left: calc(50% - 30vh/2);
	}
	#board-4{
		width: 1.55vh;
		height:30vh;
		left: 0vh;
		top: calc(35% - 30vh/2);
	}
	#area-1{
		border: 0.2vh solid #2f5039;
		width: 9vh;
		height: 13vh;
		bottom: 38vh;
		right: 4vh;
		border-radius: 1vh;
	}
	#area-2{
		border: 0.2vh solid #2f5039;
		width: 9vh;
		height: 13vh;
		top: 8vh;
		right: 4vh;
		border-radius: 1vh;
	}
	#area-3{
		border: 0.2vh solid #2f5039;
		width: 9vh;
		height: 13vh;
		top: 8vh;
		left: 4vh;
		border-radius: 1vh;
	}
	#area-4{
		border: 0.2vh solid #2f5039;
		width: 9vh;
		height: 13vh;
		bottom: 38vh;
		left: 4vh;
		border-radius: 1vh;
	}
	.drop{
		font-size: 2.5vh;
		line-height: 4vh;
	}
	#user-1{
		top: 62vh;
		left: 62vh;
	}
	
	#user-2.classic{
		top: 30vh;
		left: 115vh;
	}
	#user-2.okey-101{
		top: 34vh;
		left: 117vh;
	}
	#user-3{
		top: 4vh;
		left: 62vh;
	}
	#user-4.classic{
		top: 30vh;
		left: 10vh;
	}
	#user-4.okey-101{
		top: 34vh;
		left:1vh;
	}
	.user{
		width: 15vh;
		height: 8vh;
		border-radius: 0.5vh;
		border: 0.1vh solid #fff;
		box-shadow: 0vh 0.5vh 1vh 0vh rgb(0 0 0 / 20%), inset 0vh 0vh 2vh 0vh rgb(31 173 13 / 50%);
	}
	.user .img{
		width: 10vh;
		height: 10vh;
		margin-left: -7vh;
		margin-top: -1vh;
		box-shadow: 0vh 0.3vh 1vh 0 rgb(0 0 0 / 20%);
	}
	.user img{
		margin: 0.48vh;
	}
	.active{
		box-shadow: 0vh 0vh 3vh 0 rgb(31 173 13 / 50%), inset 0vh 0vh 1vh 0.3vh rgb(31 173 13 / 50%);
		border: 0.1vh solid #30ff00;
	}
	.user .score{	
		font-size: 1.5vh;
		margin: 0vh 0vh 0 4vh;
	}
	.user span{	
		font-size: 1.5vh;
		margin: 1.8vh 0vh 0 4vh;
	}
	#user1-total{	
		font-size: 2.5vh;
		font-weight: bold;
		width: 8vh;
		height: 4vh;
		line-height: 3.5vh;
		bottom: 28vh;
		right: 4vh;
	}
	#sort-order{
		width: 19vh;
		height: 5.71vh;
		right: 16vh;
		bottom: 28vh;
	}
	#sort-double{
		width: 19vh;
		height: 5.71vh;
		left: 16vh;
		bottom: 28vh;
	}
	#go-double{
		width: 19vh;
		height: 5.71vh;
		left: 16vh;
		bottom: 34vh;
	}
	#show-stamps{
		width: 19vh;
		height: 5.71vh;
		right: 16vh;
		bottom: 28vh;
	}
	#open-double{
		width: 19vh;
		height: 5.71vh;
		left: 16vh;
		bottom: 34vh;
	}
	#open-sort{
		width: 19vh;
		height: 5.71vh;
		right: 16vh;
		bottom: 34vh;
	}
	#handle-double{
		width: 11.5vh;
		height: 4vh;
		line-height: 4.5vh;
		left: 81vh;
		bottom: 49vh;
		font-size: 2.2vh;
	}
	#handle-sort{
		width: 11.5vh;
		height: 4vh;
		line-height: 4.5vh;
		left: 81vh;
		bottom: 44vh;
		font-size: 2.2vh;
	}
	#collect{
		width: 11.5vh;
		height: 4vh;
		line-height: 4.5vh;
		left: 81vh;
		bottom: 54vh;
		font-size: 2.2vh;
	}
	#table-sort{
		top: 15vh;
		left: 26vh;
		width: 54vh;
		height: 42vh;
		border-radius: 0.8vh;
	}
	#table-sort .area{
		height: 25vh;
		width: 39.5vh;
	}
	#table-sort span{		
		border-top-left-radius: 0.5vh;
		border-top: 0.1vh solid #000;
		border-left: 0.1vh solid #000;
		width: 8vh;
		font-size: 1.5vh;
	}
	#table-double{
		top: 15vh;
		left: 93vh;
		width: 18vh;
	}
	#table-double .area{
		height: 25vh;
		width: 4.5vh;
	}
	#table-double span{
		border-top-right-radius: 0.5vh;
		font-size: 1.1vh;
		left: 0.6vh;
		bottom: 2.1vh;
		width: 6vh;
	}
	#table-sort-score{
		padding-right: 1vh;
		left: 17.5vh;
		top: 34vh;
		width: 8vh;
		height: 4vh;
		line-height: 4vh;
		font-size: 2.5vh;
	}
	#table-double-score{
		padding-left: 0.5vh;
		right: 15vh;
		top: 34vh;
		width: 6.5vh;
		height: 4vh;
		line-height: 4vh;
		font-size: 2.5vh;
	}
	#settings{
		width:60vh;
		height:54vh;
		border-radius: 2vh;
		border: 0.2vh solid #1ed94f;
		box-shadow: 0 0 6vh 0 #baff0024;
	}
	#settings-header{
		font-size:5vh;
		color: #36ff00;
	}
	#settings .list{
		height: 8vh;
		border-radius: 0.5vh;
		margin: 1vh auto;
	}
	#settings .list span{
		margin-top: 2vh;
		margin-left: 1vh;
		font-size: 3vh;
		line-height: 2vh;
	}
	#settings .list em{
		font-size: 1.2vh;
		max-width: 42vh;
		line-height: 1.2vh;
		margin-top: 1vh;
	}
	.settings-button{
		height: 5vh;
		margin: 1.5vh 0;
		line-height: 5.1vh;
		font-size: 2.2vh;
	}
	.settings-switch{
		width: 12vh;
		height: 5vh;
		margin: 1.5vh 0;
		line-height: 5vh;
	}
	.on{
		padding-left: 3.3vh;
		padding-top: 0.1vh;
		font-size: 1.8vh;
	}
	.off{
		padding-right: 2.5vh;
		padding-top: 0.2vh;
		font-size: 1.8vh;
	}
	#settings-close{
		width: 5vh;
		height: 5vh;
		top: 1vh;
		right: 1vh;
	}
	#button-mode{
		width: 20vh;
		height: 4.5vh;
		top: 1vh;
		left: 3vh;
		line-height: 5vh;
		font-size: 2.4vh;
	}
	#button-scores{
		width: 5vh;
		height: 4.5vh;
		top: 1vh;
		left: 24vh;
		line-height: 5vh;
		font-size: 2.4vh;
	}
	#button-new{
		width: 16vh;
		height: 4.5vh;
		top: 1vh;
		right: 20vh;
		line-height: 5vh;
		font-size: 2.4vh;
	}
	#button-settings{
		width: 16vh;
		height: 4.5vh;
		top: 1vh;
		right: 3vh;
		line-height: 5vh;
		font-size: 2.4vh;
	}
	#version{
		left: 62vh;
		bottom: 28vh;
		font-size: 1vh;
		width: 15vh;
	}
}
/* Portrait */
@media (max-aspect-ratio: 1/1){
	.full{
	}
	#game{
		overflow:auto;
		height:100vh;
	}
	#game-border{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.stamp{
		text-shadow: 0 0.4vw 0.4vw #fff, 0 0 0 #000, 0 0.4vw 0.4vw #fff;
		box-shadow: 0.3vw 0.5vw 0.3vw #060650;
		border-radius:0.5vw;
	}
	.point{
		width: 3vw;
		height: 3vw;
		left: calc(50% - 3vw/2);
		bottom: calc(21% - 3vw/2);
		box-shadow: inset 0 0.3vw 0.5vw #0003;
		line-height: 1.5vw;
	}
	.heart{
		width: 1.3vw;
		height: 1.3vw;		
	}
	
	.point-mini{
		width: 1.5vw;
		height: 1.5vw;
		left: calc(50% - 1.5vw/2);
		bottom: calc(25% - 1.5vw/2);
		box-shadow: inset 0 0.1vw 0.3vw #0003;
		line-height: 0.8vh;
	}
	.heart-mini{
		width: 0.8vw;
		height: 0.8vw;		
	}
	
	#stamp-counter{	
		width: 3vw;
		height: 3vw;
		font-size: 1.8vw;
		line-height: 3vw;
		box-shadow: 0 0.3vw 0.5vw 0 rgb(0 0 0 / 35%), inset 0 0 0.4vw 0.3vw rgb(0 0 0 / 56%);
	}

	#messageBack img{
		width:20vw;
	}
	#message-box{
		width:70vw;
		height:40vw;
		font-size:4vw;
		line-height:5vw;
		padding:1vw;
		border-radius: 2vw;
		border: 0.2vw solid #1ed94f;
		box-shadow: 0 0 6vw 0 #baff0024;
	}
	#close{
		width:7vw;
		height:7vw;
		line-height:6.5vw;
		font-size:4vw;
		right:1vw;
		top:1vw;
		border-radius: 1vw;
	}
	#title{
		font-size: 6vw;
		line-height:11vw;
	}
	#body{
		height:14vw;
	}
	.button{
		min-width:25vw;
		height:6vw;
		line-height:6vw;
		padding:0 2vw;
		margin:0 1vw;
		font-size: 3.5vw;
	}
	.ok{
		text-shadow: 0 0.2vw 0.3vw rgb(0 0 0 / 56%);
		box-shadow: 0 0.3vw 0.5vw 0 #00000056, inset 0 0.1vw 0.5vw 0 #b1ff6b;
	}
	.no{
		text-shadow: 0 0.2vw 0.3vh rgb(0 0 0 / 56%);
		box-shadow: 0 0.3vw 0.5vw 0 #00000056, inset 0 0.1vw 0.5vw 0 #e7e8e8;
	}
	#pop-message{
		box-shadow: 0 1vw 2vw #0008;
		padding: 1vw;
		border-radius: 0.4vw;
		font-size:3vw;
	}
	#complete{
		width: 73vw;
		height: 36vw;
		border-radius: 2vw;
		border: 0.2vw solid #1ed94f;
		box-shadow: 0 0 6vw 0 #baff0024;
	}
	#complete-board{		
		width: 60vw;
		height: 13vw;
		margin: 3vw auto;
	}
	#complete-title{		
		font-size: 4.5vw;
		line-height: 4.5vw;
		margin: 3vw 0 0 0;
	}
	#point-select{
		width: 73vw;
		height: 36vw;
		border-radius: 2vw;
		border: 0.2vw solid #1ed94f;
		box-shadow: 0 0 6vw 0 #baff0024;
	}
	#point-select-board{		
		width: 60vw;
		height: 13vw;
		margin: 4vw auto;
	}
	#point-select-board span{
		width: 7vw;
		margin: 1vw 2vw;
		font-size: 3vw;
		line-height: 4vw;
		height: 4vw;
		box-shadow: inset 0 0 2vw #000;
		border-radius: 0.5vw;
	}
	.point-active{
		border: 0.3vw solid #55c234;
	}
	.point-passive{
		border: 0.3vw solid #7b7b7b;
	}	
	#points-table{
		width: 80vw;
		height: 61vw;
		border-radius: 2vw;
		border: 0.2vw solid #1ed94f;
		box-shadow: 0 0 6vw 0 #baff0024;
	}
	#points-line-1{
		width: 25%;
		height: 36vw;
		margin-bottom: 1vw;
		border-right: 0.2vw  solid #fff;
	}
	#points-line-2{
		width: 25%;
		height: 36vw;
		margin-bottom: 1vw;
		border-right: 0.2vw  solid #fff;
	}
	#points-line-3{
		width: 25%;
		height: 36vw;
		margin-bottom: 1vw;
		border-right: 0.2vh  solid #fff;
	}
	#points-line-4{
		width: 25%;
		height: 36vw;
		margin-bottom: 1vw;
	}
	#points-board{		
		width: 75vw;
		height: 39vw;;
		margin: 2vw auto;
	}
	#points-board-back{		
		width: 75vw;
		height: 36vw;
		margin: 2vw 2vw;
	}
	#points-board-back div{
		position:relative;
	}
	#points-board-back span{
		color: #fff;
		font-size: 2.5vw;
	}
	.rank-1{
		border: 0.3vw solid #1ed94f !important;
		height: 38vw !important;
		margin: 0 1vw;
		border-radius: 1vw;
		box-shadow: 0 0 2vw 0 #baff0090;
	}
	.rank-1 div{
		top: -5vw;
		right: -5vw;
		width: 8vw;
		height: 8vw;
	}
	.rank-2{
		border: 0.3vw solid #e8a000 !important;
		height: 38vw !important;
		margin: 0 1vw;
		border-radius: 1vw;
		box-shadow: 0 0 2vw 0 #ffb80890;
	}
	.rank-2 div{
		top: -3vw;
		right: -3vw;
		width: 6vw;
		height: 6vw;
	}
	.rank-3{
		border: 0.3vw solid #86847e !important;
		height: 38vw !important;
		margin: 0 1vw;
		border-radius: 1vw;
		box-shadow: 0 0 2vw 0 #61606090;
	}
	.rank-3 div{
		top: -3vw;
		right: -2vw;
		width: 5vw;
		height: 5vw;
	}
	.rank-4{
		border: 0.3vw solid #86847e !important;
		height: 38vw !important;
		margin: 0 1vw;
		border-radius: 1vw;
		box-shadow: 0 0 2vw 0 #61606090;
	}
	.rank-4 div{
		top: -2vw;
		right: -2vw;
		width: 4vw;
		height: 4vw;
	}
	#points-first{
		font-size: 4vw;
		top: 4vw;
	}
	#points-first span{
		width: 15vw;
		margin: 0 1.8vw;
	}
	#points-detail{
		font-size: 4vw;
		top: 10vw;
		height: 18vw;
		width: 75vw;
	}
	#points-detail span{
		width: 13.5vw;
		margin: 0px 2.6vw;
	}
	#points-last{
		font-size: 4vw;
		top: 30vw;
	}
	#points-last span{
		width: 15vw;
		margin: 0 1.8vw;
		border: 0.2vw solid #ddd;
	}	
	#remaining{
		width: 96vw;
		height: 63vw;
		border-radius: 2vw;
		border: 0.2vw solid #1ed94f;
		box-shadow: 0 0 6vw 0 #baff0024;
	}
	#remaining-board{		
		width: 93vw;
		height: 39vw;;
		margin: 4vw auto;
	}
	#remaining-board-back{		
		width: 90vw;
		height: 39vw;;
		margin: 4vw 2.75vw;
	}
	#remaining-board-back div{
		position:relative;
	}
	#remaining-board-back span{
		position: absolute;
		top: 0;
		left: 0;
		color: #0f0;
		font-size: 1.3vw;
		padding: 0 1vw;
		background: #555;
		border-radius: 0.5vw 0 0 0;		
	}
	#remaining-line-1{
		width:100%;
		height:9.5vw;
		border-radius: 0.5vw;
		margin-bottom:1vw;
	}
	#remaining-line-2{
		width:100%;
		height:9.5vw;
		border-radius: 0.5vw;
		margin-bottom:1vw;
	}
	#remaining-line-3{
		width:100%;
		height:9.5vw;
		border-radius: 0.5vw;
		margin-bottom:1vw;
	}
	#remaining-line-4{
		width:100%;
		height:9.5vw;
		border-radius: 0.5vw;
	}
	.title1{		
		font-size: 4.5vw;
		line-height: 4.5vw;
		margin: 3vw 0 0 0;
	}
	#board{
		bottom: 0;
		left: 1.5vw;
		width: 97vw;
		height: 21vw;
	}
	#board-2{
		width: 1.55vw;
		height: 30vw;
		right: 0;
		top: calc(35% - 30vw/2);
	}
	#board-3{
		width: 30vw;
		height: 1.55vw;
		top: 0;
		left: calc(50% - 30vw/2);
	}
	#board-4{
		width: 1.55vw;
		height:30vw;
		left: 0;
		top: calc(35% - 30vw/2);
	}
	#area-1{
		border: 0.2vw solid #2f5039;
		width: 7vw;
		height: 9.7vw;
		bottom: 26vw;
		right: 2vw;
		border-radius: 1vw;
	}
	#area-2{
		border: 0.2vw solid #2f5039;
		width: 7vw;
		height: 9.7vw;
		top: 9vw;
		right: 2vw;
		border-radius: 1vw;
	}
	#area-3{
		border: 0.2vw solid #2f5039;
		width: 7vw;
		height: 9.7vw;
		top: 9vw;
		left: 2vw;
		border-radius: 1vw;
	}
	#area-4{
		border: 0.2vw solid #2f5039;
		width: 7vw;
		height: 9.7vw;
		bottom: 26vw;
		left: 2vw;
		border-radius: 1vw;
	}
	.drop{
		font-size: 2.5vw;
		line-height: 4vw;
	}
	#user-1{
		top: 100vw;
		left: 46vw;
	}
	#user-2.classic{
		top: 40vw;
		right: 4vw;
	}
	
	#user-2.okey-101{
		top: 46vw;
		right: 0vw;
	}
	#user-3{
		top: 4vw;
		left: 46vw;
	}
	#user-4.classic{
		top: 40vw;
		left: 10vw;
	}
	#user-4.okey-101{
		top: 46vw;
		left: 0vw;
	}
	.user{
		width: 15vw;
		height: 8vw;
		border-radius: 0.5vw;
		border: 0.1vw solid #fff;
		box-shadow: 0 0.5vw 1vw 0 rgb(0 0 0 / 20%), inset 0 0 2vw 0 rgb(31 173 13 / 50%);
	}
	.user .img{
		width: 10vw;
		height: 10vw;
		margin-left: -7vw;
		margin-top: -1vw;
		box-shadow: 0 0.3vw 1vw 0 rgb(0 0 0 / 20%);
	}
	.user img{
		margin: 0.48vw;
	}
	.active{
		box-shadow: 0 0 3vw 0 rgb(31 173 13 / 50%), inset 0 0 1vw 0.3vw rgb(31 173 13 / 50%);
		border: 0.1vw solid #30ff00;
	}
	.user .score{	
		font-size: 1.5vw;
		margin: 0 0 0 4vw;
	}
	.user span{	
		font-size: 1.5vw;
		margin: 1.8vw 0 0 4vw;
	}
	#user1-total{
		font-size: 2.5vw;
		width: 8vw;
		height: 4vw;
		line-height: 3.5vw;
		bottom: 21vw;
		right: 3vw;
	}
	#sort-order{
		width: 19vw;
		height: 5.71vw;
		right: 12vw;
		bottom: 21vw;
	}
	#sort-double{
		width: 19vw;
		height: 5.71vw;
		left: 12vw;
		bottom: 21vw;
	}
	#go-double{
		width: 19vw;
		height: 5.71vw;
		left: 12vw;
		bottom: 27vw;
	}
	#show-stamps{
		width: 19vw;
		height: 5.71vw;
		right: 12vw;
		bottom: 21vw;
	}
	#open-double{
		width: 19vw;
		height: 5.71vw;
		left: 12vw;
		bottom: 27vw;
	}
	#open-sort{
		width: 19vw;
		height: 5.71vw;
		right: 12vw;
		bottom: 27vw;
	}
	#handle-double{
		width: 9vw;
		height: 3vw;
		line-height: 3.5vw;
		left: 60vw;
		bottom: 75vw;
		font-size: 2vw;
	}
	#handle-sort{
		width: 9vw;
		height: 3vw;
		line-height: 3.5vw;
		left: 60vw;
		bottom: 71vw;
		font-size: 2vw;
	}
	#collect{
		width: 9vw;
		height: 3vw;
		line-height: 3.5vw;
		left: 60vw;
		bottom: 79vw;
		font-size: 2vw;
	}
	#table-sort{
		top: 30vw;
		left: 18.5vw;
		width: 80vw;
	}
	#table-sort .area{
		height: 25vw;
		width: 39.5vw;
	}
	#table-sort span{		
		border-top-left-radius: 0.5vw;
		border-top: 0.1vw solid #000;
		border-left: 0.1vw solid #000;
		width: 8vw;
		font-size: 1.5vw;
	}
	#table-double{
		top: 30vw;
		left: 69.5vw;
		width: 12.8vw;
	}
	#table-double .area{
		height: 25vw;
		width: 3.2vw;
	}
	#table-double span{	
		border-top-right-radius: 0.5vw;
		font-size: 1.1vw;
		left: -0.6vw;
		bottom: 2.1vw;
		width: 6vw;
	}
	#table-sort-score{
		padding-right: 1vw;
		left: 12.2vw;
		top: 44.5vw;
		width: 6vw;
		height: 3vw;
		line-height: 3vw;
		font-size: 2vw;
	}
	#table-double-score{
		padding-left: 0.5vw;
		right: 12vw;
		top: 44.5vw;
		width: 5.5vw;
		height: 3vw;
		line-height: 3vw;
		font-size: 2vw;
	}
	#settings{
		width:60vw;
		height:54vw;
		border-radius: 2vw;
		border: 0.2vw solid #1ed94f;
		box-shadow: 0 0 6vw 0 #baff0024;
	}
	#settings-header{
		font-size:5vw;
	}

	#settings .list{
		height: 8vw;
		border-radius: 0.5vw;
		margin: 1vw auto;
	}
	#settings .list span{
		margin-top: 2vw;
		margin-left: 1vw;
		font-size: 3vw;
		line-height: 2vw;
	}
	#settings .list em{
		font-size: 1.2vw;
		max-width: 42vw;
		line-height: 1.2vw;
		margin-top: 1vw;
	}
	.settings-button{
		height: 5vw;
		margin: 1.5vw 0;
		line-height: 5.1vw;
		font-size: 2.2vw;
	}
	.settings-switch{
		width: 12vw;
		height: 5vw;
		margin: 1.5vw 0;
		line-height: 5vw;
	}
	.on{
		padding-left: 3.3vw;
		padding-top: 0.1vw;
		font-size: 1.8vw;
	}
	.off{
		padding-right: 2.5vw;
		padding-top: 0.2vw;
		font-size: 1.8vw;
	}
	#settings-close{
		width: 5vw;
		height: 5vw;
		top: 1vw;
		right: 1vw;
	}
	#button-mode{
		width: 23vw;
		height: 5vw;
		top: 1vw;
		left: 1vw;
		line-height: 5vw;
		font-size: 2.4vw;
	}
	#button-scores{
		width: 5vw;
		height: 5vw;
		top: 1.2vw;
		left: 25vw;
		line-height: 5vw;
		font-size: 2.4vw;
	}
	#button-new{
		width: 16vw;
		height: 4.5vw;
		top: 1vw;
		right: 17vw;
		line-height: 5vw;
		font-size: 2.4vw;
	}
	#button-settings{
		width: 16vw;
		height: 4.5vw;
		top: 1vw;
		right: 1vw;
		line-height: 5vw;
		font-size: 2.4vw;
	}
	#version{
		left: 45vw;
		bottom: 21vw;
		font-size: 1.5vw;
		width: 15vw;
	}
}