*{
	box-sizing:border-box;
}
body{
	margin:0px;
	background-color:#3f593c;
	background-image: radial-gradient(#535353,#060606);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; 
	color:#fff;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#game{
	opacity:1;
}
#game-border{
	display:none;
	border:0px solid #000;
	position: absolute;
	width:800px;
	height:600px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#board{
    background: URL("../img/board.webp"),#462101;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    border: 0px solid #000;
    border-radius: 3.6vw;
}
#board div{
	text-align:center;
}
#game{
	display:block;
	width:100vw;
	height:100vh;
	overflow:hidden;
}
#zoom{
	position: absolute;
	width:100%;
	background: -webkit-linear-gradient(#f1d152, #cb8722);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 1s ease-in;
	font-family: Poppins,sans-serif;
	font-weight:bold;
	text-align:center;
	z-index:99;
	pointer-events: none;
}
#message{
	position: absolute;
	display:none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:#fff;
	background:#835239;
	text-align:center;
}
#message-title{
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	background:#AA755E;
	color:#441908;
}
#message-message{
	margin:auto;
	font-family: Poppins,sans-serif;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#message .close{
	font-family: 'Bebas Neue', cursive;
	position: absolute;
	background: URL("../img/message-close.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
}
#message .ok{
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	position: absolute;
	background: URL("../img/message-yes.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
	color:#333a04;
}
#message .cancel{
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	position: absolute;
	background: URL("../img/message-no.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	cursor:pointer;
	color:#500806;
}
.full{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.hazine{
	position:absolute;
	top:15%;
	width:9.3%;
	height:70%;
	background: URL("../img/hazine.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	border:0px solid #fff;		
}
#hazine-1{
	right:5%;
}
#hazine-2{
	left:5%;
}
.kuyu{
	position:absolute;
	width:10%;
	height:45%;
	background: URL("../img/kuyu.png");
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center;
	border:0px solid #fff;
	cursor:pointer;
}
.down{
    position: absolute;
    bottom: 0;
}
.up{
    position: absolute;
    top: 0;
}
.kuyu div{
	background:url('../img/gam-4.webp');
	background-repeat: no-repeat;
	background-position: center; 
	background-size:70%;
	width:100%;
	height:100%;
	pointer-events: none;
}
.hazine div{
	background:url('');
	background-repeat: no-repeat;
	background-position: center;
	background-size:75%;
	width:100%;
	height:105%;
	pointer-events: none;	
}
#board span{
	display:inline-block;
	background:#51280c;
	opacity:0.6;
	color: #eee;
	width:3vh;
	border:1px solid #311c0d;
	font-family:tahoma;
	font-size:2vh;
	border-radius:2px;
    left: calc(50% - 1.5vh);
}
#kuyu-1{
	bottom:5%;
	left:20%;
}
#kuyu-2{
	bottom:5%;
	left:30%;
}
#kuyu-3{
	bottom:5%;
	left:40%;
}
#kuyu-4{
	bottom:5%;
	left:50%;
}
#kuyu-5{
	bottom:5%;
	left:60%;
}
#kuyu-6{
	bottom:5%;
	left:70%;
}
#kuyu-7{
	top:5%;
	left:70%;
}
#kuyu-8{
	top:5%;
	left:60%;
}
#kuyu-9{
	top:5%;
	left:50%;
}
#kuyu-10{
	top:5%;
	left:40%;
}
#kuyu-11{
	top:5%;
	left:30%;
}
#kuyu-12{
	top:5%;
	left:20%;
}
#gam{
	background: URL("../img/gam-1.webp");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position:absolute;
	width:10%;
	height:45%;
	left:0;
	right:0;
	border-radius:50%;
	transition: all 0s;
}

#hand{
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position:absolute;
	width:10%;
	height:45%;
	text-align:center;
	left:45%;
	top:-45%;
	border-radius:50%;
}
#menu{
	text-align:center;
	background-image: linear-gradient(#996347,#72442d);
	border-radius: 0.5vw;
	font-family: 'Bebas Neue', cursive;
}
#menu-ai{
	float:left;
	height:6vh;
	width:15vh;
	background:#441908;
	cursor:pointer;
	border-bottom:1px solid #c1927b;
}
#menu-ai-left{
	width:50%;
	height:100%;
	float:left;
}
.menu-ai-left-active{
	background: URL("../img/menu-pc.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.menu-ai-left-passive{
	background: URL("../img/menu-pc-passive.svg");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

#menu-ai-right{
	width:50%;
	height:100%;
	float:left;
}
.menu-ai-right-active{
	background: URL("../img/menu-2player.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.menu-ai-right-passive{
	background: URL("../img/menu-2player-passive.svg");
	background-size: 45%;
	background-repeat: no-repeat;
	background-position: center;
}
#menu-style{
	float:left;
	height:6vh;
	width:15vh;
	background:#441908;
	cursor:pointer;
	border-bottom:1px solid #c1927b;
}
#menu-style-left{
	width:50%;
	height:100%;
	float:left;
}
.menu-style-left-active{
	background: URL("../img/menu-button.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	color:#441908;
}
.menu-style-left-passive{
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	color:#835017;
}
#menu-style-right{
	width:50%;
	height:100%;
	float:left;
}
.menu-style-right-active{
	background: URL("../img/menu-button.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	color:#441908;
}
.menu-style-right-passive{
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
	color:#835017;
}
#menu-new{
	float:right;
	height:6vh;
	width:7.5vh;
	background:#441908;
	cursor:pointer;
	border-bottom:1px solid #c1927b;
}
#menu-new .left{
	background: URL("../img/menu-yeni.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width:100%;
	height:100%;
	float:right;
}
#menu-setting{
	float:right;
	height:6vh;
	width:7.5vh;
	background:#441908;
	cursor:pointer;
	border-bottom:1px solid #c1927b;
}
#menu-setting .left{
	background: URL("../img/menu-ayar.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width:100%;
	height:100%;
	float:right;
}

#menu-online{
	float:right;
	height:6vh;
	width:7.5vh;
	background:#441908;
	cursor:pointer;
	border-bottom:1px solid #c1927b;
}
#menu-online .left{
	width:100%;
	height:100%;
	float:right;
}
.menu-online-active{
	background: URL("../img/menu-online.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	color:#441908;	
}

.menu-online-passive{
	background: URL("../img/menu-online-passive.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	color:#333;	
}

#menu-score{
    position: relative;
    margin: auto;
    height: 6vh;
    width: 40vh;
    background: #441908;
    display: inline-block;
}
#menu-shadow{
	position: absolute;
    width: 100%;
    height: 14px;
    background-image: url('../img/light.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    bottom: -8px;
}
#menu-1p{
    background: URL("https://www.rekoroyun.com/online-modul/img/user/user-1.svg");
    background-size: 100%;
	background-color: #441908;
    width: 8vh;
    height: 8vh;
    position: absolute;
    top: -0.5vh;
    left: -4vh;
    border: 0.1vh solid #000;
    border-radius: 50%;
}
#menu-2p{
    background: URL("https://www.semvural.com/oyun/dama/img/user-computer.svg");
    background-size: 100%;
	background-color: #441908;
    width: 8vh;
    height: 8vh;
    position: absolute;
    top: -0.5vh;
    right: -4vh;
    border: 0.1vh solid #000;
    border-radius: 50%;
}
#menu-1p.active{
	outline: 0.5vh solid #00ff00;
}
#menu-1p.passive{
	outline: 0.5vh solid #c17216;
}

#user-1p.active{
	color:#00ff00;
}
#user-1p.passive{
	color:#fff;	
}

#menu-2p.active{
	outline: 0.5vh solid #00ff00;
}
#menu-2p.passive{
	outline: 0.5vh solid #c17216;
}

#user-2p.active{
	color:#00ff00;
}
#user-2p.passive{
	color:#fff;	
}

#menu-score-table{
    position: absolute;	
    width: 12vh;
	left:15vh;
	text-align:center;
	line-height:5.5vh;
	font-family: 'Bebas Neue', cursive;
	font-size:4vh;
	background: linear-gradient(#888,#f2f2f2);
	color: #441908;
}
#user-1p{
    position: absolute;	
	left: 4vh;
}
#user-2p{
    position: absolute;
	right: 5vh;	
}
#space{
	height:10vh;
}
#message-levels{
	display:block;
}
#message-levels div{
	display:block;
	font-family: 'Bebas Neue', cursive;
	font-weight:bold;
	cursor:pointer;
	color:#333;
}
#level-1{
	background: URL("../img/level-passive.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
#level-2{
	background: URL("../img/level-active.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
#level-3{
	background: URL("../img/level-passive.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

#loading{
	font-family: 'Bebas Neue', cursive;
	font-size:25px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
}
#start-screen{
	background: #000c;
}

#start-menu{
	font-family: 'Bebas Neue', cursive;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align:center;
}
#start-menu img{
	width: 50vh;
	height: 28.6vh;
}
#start-buttons{
    background: #88563c;
    padding: 5vh;
    border-radius: 3vh;
    width: 43vh;
    margin: auto;
}
#start-1p{
    background: url(../img/start-1p.svg);	
}
#start-2p{
    background: url(../img/start-2p.svg);	
}
#start-online{
    background: url(../img/start-online.svg);	
}
#start-settings{
    background: url(../img/start-settings.svg);	
}
.start-buttons{
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #441908;
    text-align: left;
	cursor:pointer;
    width: 33vh;
    height: 8vh;
    line-height: 8vh;
    margin: 1vh auto;
    font-size: 3.5vh;
    padding-left: 12vh;
}

/* Landscape */
@media (min-aspect-ratio: 1/1){
	#message{
		width:80vh;
		height:45vh;
		box-shadow: 0 0 5vh #0000009e;
		border-radius:1vh;
		border-bottom: 0.5vh solid #ffca00;
	}
	#message-title{
		width: 100%;
		height: 9vh;
		line-height: 10vh;
		font-size: 5vh;
		border-radius:1vh 1vh 0 0;
	}
	#message-message{
		margin: 2vh auto;
		width: 96%;
		font-size: 4vh;
		line-height: 5vh;
		text-shadow: 0.1vh 0.1vh 0.3vh #4d1d05;
	}
	#message .close{
		width: 7vh;
		height: 7vh;
		top: 1vh;
		right: 1vh;
	}
	#message .ok{
		width: 17vh;
		height: 11vh;
		line-height: 11vh;
		font-size: 4.5vh;
		bottom: 1vh;
		left: 18vh;
	}
	#message .cancel{
		width: 17vh;
		height: 11vh;
		line-height: 11vh;
		font-size: 4.5vh;
		bottom: 1vh;
		right: 18vh;
	}
	#message-levels div{
		width: 35vh;
		height: 9vh;
		line-height: 9vh;
		margin: 2vh auto;
		font-size: 4vh;
	}
}
/* Portrait */
@media (max-aspect-ratio: 1/1){
	#message{
		width: 60vw;
		height: 35vw;
		box-shadow: 0 0 5vw #0000009e;
		border-radius: 1vw;
		border-bottom: 0.5vw solid #ffca00;
	}
	#message-title{
		width: 100%;
		height: 7vw;
		line-height: 7vw;
		font-size: 4vw;
		border-radius: 1vw 1vw 0 0;
	}
	#message-message{
		width:90%;
		font-size:3.8vw;
		line-height:4.2vw;
		text-shadow: 1px 1px 3px #4d1d05;
	}
	#message .close{
		width: 5vw;
		height: 5vw;
		top: 1vw;
		right: 1vw;
	}
	#message .ok{
		width:13vw;
		height:8vw;
		line-height:8.5vw;
		font-size:3vw;
		bottom:1vw;
		left:13vw;
	}
	#message .cancel{
		width:13vw;
		height:8vw;
		line-height:8.5vw;
		font-size:3vw;
		bottom:1vw;
		right:13vw;
	}
	#message-levels div{
		width: 30vw;
		height: 8vw;
		line-height: 8vw;
		margin: 1vw auto;
		font-size: 4vw;
	}
}