html, body{
	user-select: none;
	background-color: #07071c;
	margin: 0 0;
	padding: 0 0;
	font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Helvetica Neue", Arial, sans-serif;
}

.mainFrame{
	width: 1024px;
	height: 768px;
	margin-left: auto;
	margin-right: auto;
	/* border: 20px solid black;
	border-image-slice: fill 50 50 50;
	border-image-source: url('../img/main-background.jpg'); */
	background-image: url('../img/map-background.png');
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	z-index: 0;
	position: relative;
}

.mainFrame > .helperLayout{
	visibility: hidden;
	width: 100%;
    height: 20%;
	/* width: 80%;
    height: auto; */
	/* background-color: green; */
	position: absolute;
	top: 10%;
	z-index: 1105;
	display: flex;
	justify-content: flex-start;
    align-items: center;
}

.option{
	width: 4%;
	height: 12%;
	position: absolute;
	right: 2%;
	top: 44%;
	z-index: 1110;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50px;
}

.full-screen{
	width: 100%;
	height: 50%;
	background-position: bottom;
}

.full-screen:hover{ 
	cursor:pointer;
}

.sound{
	width: 100%;
	height: 50%;
	background-position: top;
}

.sound:hover{ 
	cursor:pointer;
}

.full-screen-enter{
	background-image: url('../img/icon-fullscreen-enter.png');
	background-repeat: no-repeat;
	background-size: 75%;
}

.full-screen-exit{
	background-image: url('../img/icon-fullscreen-exit.png');
	background-repeat: no-repeat;
	background-size: 75%;
}

.sound-on{
	background-image: url('../img/icon-sound-on.png');
	background-repeat: no-repeat;
	background-size: 75%;
}

.sound-off{
	background-image: url('../img/icon-sound-off.png');
	background-repeat: no-repeat;
	background-size: 75%;
}

/**

	startpage

**/

/* .setIntroFrame{
	visibility: hidden;
	background-image: url('../img/bg-setting.png');
} */

.playerDataDiv{
	z-index: 1100;
}
.playerDataDiv > img {
	width: 105%;
	opacity: 0;
	transition: .3s;
}
.playerDataDiv.active > img {
	opacity: 1;
}
.titleFrame{
	width: 100%;
	height: 100%;
	background-image: url('../img/main-background.png');
	background-repeat: no-repeat;
	background-size: cover;
}

.titleFrame .centerLayout{
	width: 100%;
	height: 70%;
    top: 15%;
	z-index: 0;
	position: absolute;
	visibility: hidden;
}

.titleFrame .centerLayout:hover{ 
	cursor:pointer;
}

.titleFrame .loadFinishedText{
    width: 100%;
    height: 10%;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 35px;
	/* identical to box height */

	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	position: absolute;
	bottom: 5%;
	text-align: center;
}

.titleFrame .startText{
    width: 100%;
    height: 10%;
	font-style: normal;
	font-weight: bold;
	font-size: 52px;
	line-height: 75px;

	color: #FFFFFF;

	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	bottom: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	animation-name: start;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@keyframes start {
	0% { opacity: 0.3;}
	50% { opacity: 1.0;}
	100% { opacity: 0.3;}
}

/* .titleFrame .sound-button{
    width: 5%;
    height: 5%;
    position: absolute;
    bottom: 5%;
	right: 1.3%;
	z-index: 120;
}

.sound-button:hover{ 
	cursor:pointer;
} 

.sound-on{
	background-image: url('../img/sound-on.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.sound-off{
	background-image: url('../img/sound-off.png');
	background-repeat: no-repeat;
	background-size: contain;
} */

.titleFrame .title{
	background-image: url('../img/logo.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 50%;
	height: 30%;
    position: relative;
    font-size: 72px;
    top: 35%;
    left: 25%;
}

/**

	startpage end

**/

.questionPage{
	z-index: 103;
}

.questionFrame{
	/* width: 50%;
	height: 50%;
	margin-top: auto;
	margin-bottom: auto;
	margin: 50px; */
	width: 100%;
	height: 80%;
	background-color: white;
	/* background-image: url('../img/question.png'); */
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute; 
	top: 10%;
	z-index: 1111;
	
	visibility: hidden;
} 

.questionFrame-helper{
	position: absolute;
	height: 8%;
	top: 5%;
	left: 7%;
	visibility: hidden;
}
.helper-container{
	height: 100%;
	background: #5164BF;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.helper-container .helperText{
	padding-right: 2%;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 35px;
	white-space: nowrap;
	/* identical to box height */

	letter-spacing: 0.05em;

	color: #F8DA5F;
}

.cutInPage{
	position: absolute;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: 1111;
}

.cutInBackground{
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.5;
}

.cutInFrame{
	width: 100%;
	height: 75%;
	background-color: white;
	position: absolute;
	z-index: 1000;
	top: 12.5%;
}

.cutInFrame .cutInContent{
	position: absolute;
	left: 35%;
	bottom: 20%;
	width: 30%;
	height: 10%;
	font-style: normal;
	font-weight: bold;
	font-size: 32px;
	line-height: 44px;
	text-align: center;
	letter-spacing: 0.1em;

	color: #515151;
	text-align: center;
}

.cutInFrame .cutInPic{
	position: absolute;
	width: 30%;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	left: 35%;
	top: 15%;
}

#cutInPic-card1{
	background-image: url('../img/cardDescription-card1.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-card2{
	background-image: url('../img/cardDescription-card2.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-card3{
	background-image: url('../img/cardDescription-card3.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-card4{
	background-image: url('../img/cardDescription-card4.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-player0{
	background-image: url('../img/player1.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-player1{
	background-image: url('../img/player2.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-player2{
	background-image: url('../img/player3.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

#cutInPic-player3{
	background-image: url('../img/player4.png');
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

.mainUseCardPage{
	visibility: hidden;
}

.mainUseCardPage .dealCardDescriptionInner{
	z-index: 200000;
	left: 30%;
	top: 10%;
}

.mainUseCardPage .dealCardDescriptionBackground{
	z-index: 200000;
}

.mainUseCardPage .title-label{
    width: 70%;
    height: 10%;
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.1em;

    color: #2B3A78;
    top: 5%;
    left: 15%;
    position: relative;
    display: flex;
	justify-content: center;
    align-items: center;
}

.mainUseCardPage .closeButton{
    width: 60px;
    height: 60px;
    position: absolute;
    background: url('../img/btn-close.png');
    background-size: contain;
    background-repeat: no-repeat;
    right: -3%;
    top: -3%;
}

.mainUseCardPage .cardAnimation{
    width: 100%;
    height: 43%;
    position: absolute;
    right: 1%;
    top: 18%;
}

.mainUseCardPage .cardRank{
    width: 100%;
    height: 10%;
    position: absolute;
    bottom: 3%;
    background: url('../img/card-star-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mainUseCardPage .cardContent{
    width: 66%;
    height: 25%;
    position: absolute;
    left: 17%;
    top: 65%;
    font-family: Noto Sans TC;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 29px;
    letter-spacing: 0.1em;
    overflow-y: hidden;

    color: #2B3A78;
}

.main-use-card-button-div{
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 8%;
	bottom: 6%;
}

.main-card-button{
	background: none;
	z-index: 200000;
	width: 12%;

	display: inline-block;
	padding: 0px 24px;
	margin: 0px 12px;
	white-space: nowrap;

	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* identical to box height */

	
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #EE8D38;
}

/* .main-use-card-button{
	left: 32%;
}

.main-close-card-button{
	right: 33%;
} */

.beforeGameFrame{
	visibility: hidden;
	width: 100%;
	height: 100%;
	position: absolute; 
	z-index: 99999;
	visibility: hidden;
	background-image: url('../img/game-intro.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.endGameFrame{
	visibility: hidden;
	width: 100%;
	height: 100%;
	position: absolute; 
	z-index: 9999;

	visibility: hidden;
}

.endGameFrameBackground{
	width: 100%;
	height: 100%;
	position: absolute; 
	background-color: black;
	opacity: 0.8;
}

.endGameFrameForeground{
	top: 10%;
	width: 100%;
	height: 80%;
	position: absolute; 
	background-color: white;
}

.endGameTitle{
	width: 35%;
	left: 32.5%;
	right: 32.5%;
	bottom: 30%;
	font-style: normal;
	font-weight: bold;
	font-size: 32px;
	line-height: 44px;
	/* identical to box height */

	text-align: center;
	letter-spacing: 0.1em;

	color: #515151;
	position: absolute; 
	text-align: center;
}

/* .endGamePlayer{
	width: 50%;
	height: 50%;
	left: 25%;
	right: 25%;
	top: 10%;
	position: absolute; 
} */

.endGameWinner{
	visibility: hidden;
	background-image: url('../img/win-bg.png');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	width: 60%;
	height: 40%;
	left: 20%;
	right: 25%;
	top: 10%;
	position: absolute; 
}

.endGamePlayer1{
	background-position: center;
	width: 60%;
	height: 40%;
	left: 20%;
	right: 25%;
	top: 20%;
	position: absolute; 
}

.endGamePlayer2{
	background-position: center;
	width: 60%;
	height: 40%;
	left: 20%;
	right: 25%;
	top: 20%;
	position: absolute; 
}

.endGamePlayerLeft{
	background-position: left;
}

.endGamePlayerRight{
	background-position: right;

}

.restart{
	bottom: 15%;
	left: 42.5%;
	position: absolute; 
	width: 15%;
	height: 10%;

	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	/* identical to box height */

	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #EE8D38;
	white-space: nowrap;
}

/* .endGamePlayer1{
	background-position: center;
}


.endGamePlayer2{
	background-position: center;
} */

#question{
	width: 86%;
	height: auto;
	margin-top: 10%;
	margin-left: 7%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	position: absolute; 
}

#correct-wrong{
	width: 100%;
	height: 100%;
	position: absolute;
}

#solution{
	width: 86%;
	height: auto;
	bottom: 30%;
	margin-left: 7%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	position: absolute; 
	visibility: hidden;
}

.correct{
	background-image: url('../img/correct.png');
	background-position: center;
	background-repeat: no-repeat;
}

.wrong{
	background-image: url('../img/wrong.png');
	background-position: center;
	background-repeat: no-repeat;
}

#clock{
	position: relative;
	display: inline-flex;
	justify-content: left;
	align-items: left;
	left: 2%;
	width: 40%;
	height: 90%;
}

#speaker{
	height: 200%;
}
#speaker img{
	height: 100%;
}
/* #treasure-box{
	width: 80%;
	height: 55%;
	top: 22.5%;
	left: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; 
	animation-iteration-count: 1;
} */

@keyframes cutin {
	0% { left: 85%; opacity: 0;}
	10% { left: 35%; opacity: 1; }
	80% { left: 35%; opacity: 1; }
	90% { left: 0%; opacity: 0;}
	100% { left: -15%; opacity: 0;}
}

.backgroundFrame{
	visibility: hidden;
	background-color: black;
	width: 100%;
	height: 100%;
	position: absolute; 
	z-index: 1102;
	opacity: 0.3;
}

.congratulationsText{
	position: absolute; 
	width: 20%;
	left: 8%;
	bottom: 50%;
	font-size: 20px;
	font-weight: bold;
}

.congratulationsPlayer{
	width: 20%;
	height: 30%;
	position: absolute; 
	left: 10%;
	bottom: 15%;
	background-repeat: no-repeat;
	background-size: contain;
}

.congratulationsPlayer1{
	background-image: url('../img/player1.png');
}

.congratulationsPlayer2{
	background-image: url('../img/player2.png');
}

.itemCardDescription{
	width: 50%;
	height: 80%;
	position: absolute; 
	left: 25%;
	bottom: 15%;
	background-repeat: no-repeat;
	background-size: contain;
}

.itemCardDescriptionBridge{
	background-image: url('../img/card_description_bridge.png');
}
.itemCardDescriptionSwitch{
	background-image: url('../img/card_description_switch.png');
}
.itemCardDescriptionMissile{
	background-image: url('../img/card_description_missile.png');
}
.itemCardDescriptionReturn{
	background-image: url('../img/card_description_return.png');
}

.countDown{
	z-index: 151;
	width: 12%;
	height: 8%;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 7%;
	top: 5%;
}

.countDown-QuestionFrame{
	position: relative;
	width: 60%;
	height: 90%;
	font-family: Noto Sans;
	font-style: normal;
	font-weight: bold;
	/* font-size: 40px;
	line-height: 54px; */
	display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 4vmin;
	letter-spacing: 0.05em;

	color: #F8DA5F;
}

.countDown-MainFrame{
	position: absolute;
	visibility: hidden;
	top: 5%;
	left: 42%;
	width: 16%;
	height: 65%;
	background: rgba(0, 0, 0, 1);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1105;
}

.countDown-MainFrame-Content{
	position: relative;
	font-family: Noto Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 40px;
	line-height: 54px;
	width: 60%;
	height: 90%;
	display: inline-flex;
	justify-content: center;
    align-items: center;
    /* font-size: 4vmin; */
	letter-spacing: 0.05em;
	/* identical to box height */

	letter-spacing: 0.05em;

	color: #F8DA5F;
}

/* .myButton{
	border: 10px solid black;
	border-image-slice: 10% fill;
	border-image-repeat: stretch;
	border-image-source: url('../img/title_button.png');
	/* background: url('../img/title_button.png');
	background-repeat: no-repeat;
	background-size: 100% 100%; 
	display: flex;
	justify-content: center;
	align-items: center;
	width: 15%;
	height: 30%;
} */

.bottomButton{
	position: absolute;
	bottom: 7%;
	left: 42.5%;
	width: 15%;
	height: 10%;
}

.topButton{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 5%;
	left: 42.5%;
	width: 15%;
	height: 65%;
}

.endButton{
	z-index: 1102;
	font-style: normal;
	font-weight: bold;
	font-family: Noto Sans TC;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 35px;
	/* identical to box height */

	text-align: center;
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #61B5DD;
	white-space: nowrap;
}

/* .endButton:hover{ 
	cursor:pointer;
} */

.nextButtonDiv{
	position: absolute;
	width: 100%;
	height: 8%;
	bottom: 6%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-next-button{
	white-space: nowrap;
	background: none;
	width: 15%;
	height: 100%;

	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* identical to box height */

	
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #EE8D38;
}

.next-round-button{
	visibility: hidden;
	white-space: nowrap;
	background: none;
	width: 15%;
	height: 100%;

	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	display: flex;
	justify-content: center;
	align-items: center;

	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #EE8D38;
	z-index: 1111;
}

.not-use-card-button{
	visibility: hidden;
	white-space: nowrap;
	background: none;
	width: 15%;
	height: 100%;

	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	display: flex;
	justify-content: center;
	align-items: center;

	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #EE8D38;
	z-index: 1111;
}

/*.next-round-button:hover{ 
	cursor:pointer;
} */

.answerButtonDiv{
	width: 100%;
	height: 10%;
	position: relative; 
	top: 85%;
	display: flex;
	justify-content: center;
}

.afterAnswerButtonDiv{
	width: 100%;
	height: 10%;
	position: absolute; 
	top: 85%;
	visibility: hidden;
	display: flex;
	justify-content: center;
}

.answer-button{
	width: 12%;
	padding: 0px 24px;
	margin: 0px 12px;
	height: 100%;
	background: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	/* identical to box height */

	padding: 0px;
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #EE8D38;
}

.afterAnswerButton{
	white-space: nowrap;
	width: 12%;
	padding: 0px 24px;
	margin: 0px 12px;
	height: 100%;
	background: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	/* identical to box height */

	padding: 0px;
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #61B5DD;
}

.bridge{
	background-image: url('../img/bridge.png');
	background-size: contain;
	width: 20px;
	height: 16px;
	position: absolute;
}

.bridge-not-built{
	background-image: url('../img/bridge.png');
	background-size: contain;
	width: 20px;
	height: 16px;
	position: absolute;
	visibility: hidden;
}
.bridge-not-built::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	border-top: 6px solid #ffff68;
	border-bottom: 6px solid #ffff68;
	opacity: 0.2;
	animation: bridge-opacity 1s cubic-bezier(0.76, 1.69, 1, 1) infinite;
}
@keyframes bridge-opacity {
	0%{opacity: 0.2;}
	50%{opacity: 1;}
	100%{opacity: 0.2;}
}
.bridge-not-built:hover{ 
	cursor:pointer
}

.teamLayout{
	background: url('../img/energybar-bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 7.5%;
	right: 7.5%;
	z-index: 1101;
	height: 12%;
	width: 85%;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.3));
}

.team{
	height: 30%;
	position: absolute;
	top: 60%;
}

.teamName{
	padding: 0px 8px;
	height: 30%;
	position: absolute;
	top: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.team1Name{
	left: 0%;
	font-family: Noto Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	/* identical to box height */

	letter-spacing: 0.1em;

	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
}

.team2Name{
	right: 0%;
	font-family: Noto Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	/* identical to box height */

	letter-spacing: 0.1em;

	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	text-align: end;
}

.team1Div{
	left: 26%;
}

.team2Div{
	right: 26%;
}

.teamPointDiv{
	width: 30%;
	height: 90%;
}

.team1PointDiv{
	position: absolute;
	left: 7%;
	display: flex;
}

.team2PointDiv{
	position: absolute;
	right: 7%;
	display: flex;
  	flex-direction: row-reverse;
}

.teamPoint{
	width: 11%;
	height: 45%;
	margin-top: 2%;
	margin-left: 2px;
	margin-right: 2px;
	background: url('../img/energy-default.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: inline-block;
	border-radius: 5px;
}

.team1Point{
	background: url('../img/energy-red.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.team2Point{
	background: url('../img/energy-green.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.teamCount{
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	font-family: Noto Sans;
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	/* identical to box height */

	letter-spacing: 0.1em;

	color: #FFFFFF;

	height: 100%;
	padding: 0px 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}

.defaultIsland{
	background: url('../img/default-island.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.defaultIsland:hover{ 
	cursor:pointer
}

.defaultIsland-lose{ 
	background: url('../img/default-island-lose.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.player1Island{
	background: url('../img/player1-island.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.player2Island{
	background: url('../img/player2-island.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.player1{
	width: 60px;
	height: 60px;
	position: absolute;
	pointer-events: none;
}

.player2{
	width: 60px;
	height: 60px;
	position: absolute;
	pointer-events: none;
}

.player1MapInfoLayout{
    width: 15%;
    height: 10%;
    position: absolute;
    left: 0%;
    top: 5%;
}

.player2MapInfoLayout{
    width: 15%;
    height: 10%;
    position: absolute;
    right: 0%;
    top: 5%;
}

.dice-effect, .dice{
	visibility: visible;
	width: 18%;
	height: 15%;
	bottom: 8%;
	left: 41%;
	position: absolute;
	background-image: url('../img/point-1.png');
    background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	font-weight: bold;
	z-index: 1104;
}
.dice-effect{
	opacity: 0;
	background-image: url('../img/point-active.png');
	transition: .3s;
	transform: scale(1.1);
}
.dice-effect.active {
	visibility: visible;
	opacity: 1;
	animation: dice-stroke 1s cubic-bezier(0.76, 1.69, 1, 1) infinite;
}

@keyframes dice-stroke {
	0% {transform: scale(1.1);}
	50% {transform: scale(1.2);}
	100% {transform: scale(1.1);}
}

.dice:hover{ 
	cursor:pointer;
}

#dice-1{
	background-image: url('../img/point-1.png');
}

#dice-2{
	background-image: url('../img/point-2.png');
}

#dice-3{
	background-image: url('../img/point-3.png');
}

#dice-4{
	background-image: url('../img/point-4.png');
}

#dice-5{
	background-image: url('../img/point-5.png');
}

#dice-6{
	background-image: url('../img/point-6.png');
}

.teamCard{
	border-style: solid;
	background-color: green;
	width: 7%;
	height: 5%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
}

.usedCard{
	/* background-color: gray; */
	display: none;
}

.cardDescription{
	border-style: solid;
	background-color: white;
	width: 13%;
	height: 7%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
	visibility: hidden;
}

.player-icon-0{
    background-image: url('../img/player1.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.player-icon-1{
    background-image: url('../img/player2.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.player-icon-2{
    background-image: url('../img/player3.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.player-icon-3{
    background-image: url('../img/player4.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.hint-point{
	height: 60px;
	width: 60px;
	opacity: 0.7;
	pointer-events: none;
	background-color: #ffff68;
	border-radius: 50%;
	position: absolute;
	display: inline-block;
	z-index: 100;
	animation-name: hint;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes hint {
	0% { opacity: 0.3;}
	50% { opacity: 0.8;}
	100% { opacity: 0.3;}
}

.orangeButton{
	border-width: 10px;
    border-image-slice: 10 10 10 10 fill;
    border-image-width: 12px;
	border-image-source: url('../img/btn-main.png');
    border-image-outset: 0 0 4px 0;
    background-color: #ECAB59;
    border-radius: 12px;
	outline:none;
}

.blueButton{
	border-width: 10px;
    border-image-slice: 10 10 10 10 fill;
    border-image-width: 12px;
	border-image-source: url('../img/btn-second.png');
	border-image-outset: 0 0 4px 0;
    background-color: #84D6FA;
    border-radius: 12px;
	outline:none;
}

.darkButton{
	border-width: 10px;
    border-image-slice: 10 10 10 10 fill;
	border-image-width: 12px;
	font-style: normal;
	font-weight: bold;
	font-size: 28px;
	line-height: 41px;
	/* identical to box height */

	text-align: center;
	letter-spacing: 0.1em;

	color: #FFFFFF;

	text-shadow: 0px 4px 8px #808080;
	border-image-source: url('../img/btn-third.png');
	border-image-outset: 0 0 4px 0;
    background-color: #B8B8B8;
    border-radius: 12px;
	outline:none;
}

.orangeButton:hover{ 
	cursor:pointer;
}

.blueButton:hover{ 
	cursor:pointer;
}

.darkButton:hover{ 
	cursor:pointer;
}