:root {
  --main_background:#222;
  --main_background_highlight:#222;
  --main_color:#999;
  --main_color_highlight:#ccc;
  --main_border:#777;
  --green:MediumSeaGreen;
  --orange:Orange;
  --red:Red;
  --mahjong_red:#b93c3c;
  --mahjong_red2:#b92121;
  --blue:DodgerBlue;
  --purple:SlateBlue;
  --yellow:Gold;
  --gray:#555;
  --lightteal:#93a1a1;
  --lightgray:#777;
  --white:#fff;
  --removed_tile_border:transparent;
  --empty_slots_border:#555;
  --large:4vw;
  --normal:2vw;
  --small:1.5vw;
  --smaller:1.2vw;
  --tiny:1vw;
  --tinier:0.8vw;
  --system:1.3vw;
  --info:1.3vw;
}

body{
	background:linear-gradient(#181a2b,#2a2e4d,#181a2b);/*1a1733*/
	font-size:var(--small);
	color:var(--main_color);
	font-family: "Epunda Slab", serif;
  	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	margin:0;
	padding:0;
	overflow: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* Internet Explorer 10+ */

	touch-action: manipulation;
	-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		 -khtml-user-select: none; /* Konqueror */
			 -moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
						user-select: none; /* Non-prefixed version, currently
																	not supported by any browser */
}

body::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}



button{
	font-family: "Epunda Slab", serif;
  	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	border-radius: 1vw;
}







button.button1{
	background-color:var(--main_background);
	font-size:var(--small);
	color:var(--main_color);
	border:0.2vw solid var(--main_border);
	margin:0;
	padding:0.2vw 0.5vw;
	border-radius: 1vw;
	cursor: pointer;
}
button.button1:disabled{
	background-color:#333;
	font-size:var(--small);
	color:#444;
	border:0.2vw solid #444;
	margin:0;
	padding:0.2vw 0.5vw;
	cursor: default;
}
button.button2{
	background-color:var(--main_background);
	font-size:var(--small);
	color:var(--main_color);
	border:0.2vw solid var(--main_border);
	margin:0;
	padding: 0.5vw 1vw;
	border-radius: 1vw;
	cursor: pointer;
}
button.button2:disabled{
	background-color:#333;
	font-size:var(--tinier);
	color:#444;
	border:0.2vw solid #444;
	margin:0;
	padding:0.2vw 0.5vw;
	cursor: default;
}
button.button3{
	background-color:#111;
	font-size:var(--normal);
	color:#ccc;
	border:0.2vw solid var(--purple);
	margin:0;
	padding:1vw 5vw;
	border-radius: 1vw;
	line-height: 0.8;
	cursor: pointer;
}
button.button3:hover{
	color:#fff;
	border:0.2vw solid var(--yellow);
}
button.button3:disabled{
	background-color:#333;
	font-size:var(--small);
	color:#444;
	border:0.2vw solid #444;
	margin:0;
	padding:0.2vw 0.5vw;
	cursor: default;
}
button.button4{
	background-color:var(--main_background);
	font-size:var(--small);
	color:var(--main_color);
	border:0.2vw solid var(--green);
	margin:0;
	padding:0.2vw 0.5vw;
	border-radius: 1vw;
	cursor: pointer;
}

button:active{transform: scale(98%);}
button:focus{
	-webkit-tap-highlight-color: transparent;
}


.large{font-size:var(--large);}
.normal{font-size:var(--normal);}
.small{font-size:var(--small);}
.smaller{font-size:var(--smaller);}
.tiny{font-size:var(--tiny);}
.tinier{font-size:var(--tinier);}

.rank0{color:#ccc;}
.rank1{color:Gold;}
.rank2{color:DeepPink;}
.rank3{color:#b92121;}
.rank4{color:MediumSeaGreen;}
.rank5{color:DodgerBlue;}
.rank6{color:SlateBlue;}
.rank7{color:Gold;animation: rank_glow 2s infinite;}
@keyframes rank_glow {
  0% {color: Gold;}
  50% {color: SlateBlue;}
  100% {color: Gold;}
}

.main_background{color:var(--main_background);}
.main_color{color:var(--main_color);}
.white{color:#fff;}
.subtitle_gray{color:#aaa;}
.lightgray{color:#aaa;}
.red{color:var(--red);}
.pink{color:var(--pink);}
.orange{color:var(--orange);}
.purple{color:var(--purple);}
.green{color:var(--green);}
.teal{color:var(--teal);}
.lightteal{color:var(--lightteal);}
.gray{color:var(--gray);}
.blue{color:var(--blue);}
.yellow{color:var(--yellow);}
.mahjong_red{color:var(--mahjong_red);}
.mahjong_red2{color:var(--mahjong_red2);}

.large_purple{font-size:var(--large);color:var(--purple);}
.large_orange{font-size:var(--large);color:var(--orange);}
.large_lightteal{font-size:var(--large);color:var(--lightteal);}
.large_green{font-size:var(--large);color:var(--green);}
.small_purple{font-size:var(--small);color:var(--purple);cursor:pointer;}
.small_red{font-size:var(--small);color:var(--red);cursor:pointer;}
.small_green{font-size:var(--small);color:var(--green);cursor:pointer;}
.small_lightteal{font-size:var(--small);color:var(--lightteal);cursor:pointer;}
.tiny_gray{font-size:var(--tiny);color:var(--gray);}

.lv_title{
	font-family: "Corinthia", cursive;
	font-weight: 400;
	font-style: normal;
	margin: 0;
	letter-spacing: 1vw;
	animation: lv_glow 2s infinite;
}
@keyframes lv_glow {
  0% {color: var(--red);}
  50% {color: var(--white);}
  100% {color: var(--red);}
}
.subtitle{
	font-family: "Changa One", sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 2.5vw;
}

td.title_td{
	line-height: 0.8;
	text-align: center;
}
div.pick_continent{
	margin:0;
	margin-bottom: 1vw;
}





/*
to make sure that the image is centered on the button,
the button should not have width but just padding
and then the width is only set on the image
*/
button.tile{
	text-align: center;
	/*filter: saturate(110%) contrast(110%) brightness(110%);*/
	background: linear-gradient(#d4d2c3,#a8a699);/*b3b1a4*/
	border-radius: 1vw;
	border: 0.2vw solid #ddd;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #666;
	-webkit-tap-highlight-color: transparent;
}
button.tile:hover{
	background: linear-gradient(#ebe8d8,#d4d2c3);
	border: 0.2vw solid #fff;
}
button.tile_selected{
	text-align: center;
	background-color: #d4d2c3;
	border-radius: 1vw;
	border: 0.2vw solid red;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #6e2d2d;
	-webkit-tap-highlight-color: transparent;
}
button.tile_removed{
	text-align: center;
	background-color: transparent;
	border-radius: 1vw;
	border: 0.2vw solid var(--removed_tile_border);
	cursor: default;
	padding: 0.3vw;
	margin: 0.1vw;
	-webkit-tap-highlight-color: transparent;
}
button.occupied_slot{
	text-align: center;
	background: linear-gradient(#d4d2c3,#b3b1a4);
	border-radius: 1vw;
	border: 0.2vw solid #ddd;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #454545;
	-webkit-tap-highlight-color: transparent;
}
button.occupied_slot:hover{
	background: linear-gradient(#ebe8d8,#d4d2c3);
}
button.selected_slot{
	text-align: center;
	background-color: #d4d2c3;
	border-radius: 1vw;
	border: 0.2vw solid red;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #6e2d2d;
	-webkit-tap-highlight-color: transparent;
}
button.empty_slot{
	text-align: center;
	background-color: transparent;
	border-radius: 1vw;
	border: 0.2vw solid var(--empty_slots_border);
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #454545;
	-webkit-tap-highlight-color: transparent;
}
button.empty_slot_paid{
	text-align: center;
	background-color: #2a2e4d;
	border-radius: 1vw;
	border: 0.2vw solid var(--empty_slots_border);
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #454545;
	-webkit-tap-highlight-color: transparent;
}
button.empty_slot_hidden{
	visibility: hidden;
	text-align: center;
	background-color: transparent;
	border-radius: 1vw;
	border: 0.2vw solid var(--empty_slots_border);
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #454545;
	-webkit-tap-highlight-color: transparent;
}
button.tile_matching{
	background: #c3d7db;/*gentle sky blue a3d9e2*/
	-webkit-tap-highlight-color: transparent;
}
button.tile_matching:hover{
	background: #bcd9df;
	-webkit-tap-highlight-color: transparent;
}




button.tut_tile{
	text-align: center;
	/*filter: saturate(110%) contrast(110%) brightness(110%);*/
	background: linear-gradient(#d4d2c3,#a8a699);/*b3b1a4*/
	border-radius: 1vw;
	border: 0.2vw solid #ddd;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #666;
	-webkit-tap-highlight-color: transparent;
}
button.tut_tile_selected{
	text-align: center;
	background-color: #d4d2c3;
	border-radius: 1vw;
	border: 0.2vw solid red;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #6e2d2d;
	-webkit-tap-highlight-color: transparent;
}
button.tut_tile_matching{
	background: linear-gradient(#a3d9e2,#6aa6b3);
	-webkit-tap-highlight-color: transparent;
	/*animation: matching_blink 1000ms steps(2,end) infinite;*/
}
@keyframes matching_blink {
  0% {background: linear-gradient(#d4d2c3,#a8a699);}
  100% {background: linear-gradient(#a3d9e2,#6aa6b3);}/*6aa6b3*/
}

button.tut_tile_removed{
	text-align: center;
	background-color: transparent;
	border-radius: 1vw;
	border: 0.2vw solid var(--removed_tile_border);
	cursor: default;
	padding: 0.3vw;
	margin: 0.1vw;
	-webkit-tap-highlight-color: transparent;
}
button.tut_occupied_slot{
	text-align: center;
	background: linear-gradient(#d4d2c3,#b3b1a4);
	border-radius: 1vw;
	border: 0.2vw solid #ddd;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #454545;
	-webkit-tap-highlight-color: transparent;
}
button.tut_occupied_slot:hover{
	background: linear-gradient(#ebe8d8,#d4d2c3);
}
button.tut_selected_slot{
	text-align: center;
	background-color: #d4d2c3;
	border-radius: 1vw;
	border: 0.2vw solid red;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #6e2d2d;
	-webkit-tap-highlight-color: transparent;
}
button.tut_empty_slot{
	text-align: center;
	background-color: transparent;
	border-radius: 1vw;
	border: 0.2vw solid var(--empty_slots_border);
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #454545;
	-webkit-tap-highlight-color: transparent;
}
button.tut_slot_matching{
	border: 0.2vw solid #a3d9e2;
	box-shadow: 0.3vw 0.3vw #a3d9e2;
	/*animation: matching_blink 1000ms steps(2,end) infinite;*/
}
@keyframes matching_blink {
  0% {background: linear-gradient(#d4d2c3,#a8a699);}
  100% {background: linear-gradient(#a3d9e2,#6aa6b3);}/*6aa6b3*/
}


button.settings_tile{
	text-align: center;
	background: linear-gradient(#d4d2c3,#b3b1a4);
	border-radius: 1vw;
	border: 0.2vw solid #ddd;
	cursor: pointer;
	padding: 0.3vw;
	margin: 0.1vw;
	box-shadow: 0.3vw 0.3vw #666;
	-webkit-tap-highlight-color: transparent;
}

img.menu_tile{
	width: 2vw;
	height: 1.5vw;
}
img.hand_icon{
	width: 2vw;
	height: 1.5vw;
	position: absolute;
	animation: wiggle 1s infinite;
}
@keyframes wiggle {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-0.5vw);
  }
}


img.img_tile{
	width: 3vw;
	height: 4vw;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

div.odd_line{
	margin: 0;
	margin-left: 2.8vw;
}
div.even_line{
	margin: 0;
}












div.main_section{
	display: flex;
	justify-content:center;
	text-align: center;
	flex-wrap: wrap;
}
div.header{
	background-color: #111;
	border: 0px solid #222;
  	border-bottom: 0.2vw solid var(--main_color);
	padding: 0.2vw 0 0.5vw 0;
}
div.board_section{
	display: block;
	margin: auto;
	text-align: center;
}

table.header{
	margin: auto;
	width: 100%;
}
table.header td{
	vertical-align: middle;
	text-align: center;
	border: 0vw solid #fff;
}
table.header td.left{
	text-align: left;
}
table.header td.right{
	text-align: right;
}

table.slots_table{
	margin: auto;
}






div#menu_block{
	position: absolute;
	background-color:#333;
	font-size:var(--normal);
	color:var(--main_color);
	border:0.4vw double var(--gray);
	text-align: center;
	background: linear-gradient(#181a2b 0%,#2a2e4d 15%,80%,#181a2b);
	margin:0;
	padding:2vw;
	border-radius: 2vw;
	z-index: 1001;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 1000; /* Make sure it's on top */
}


div#message_popup{
	position: absolute;
	background-color:#333;
	font-size:var(--normal);
	color:var(--main_color);
	border:0.4vw double var(--gray);
	text-align: center;
	background: linear-gradient(#181a2b 0%,#2a2e4d 15%,80%,#181a2b);
	margin:0;
	padding:0.5vw 1vw;
	border-radius: 2vw;
	z-index: 1001;
}
table.popup_confirm{
	width: 70%;
	margin: 0 auto;
	padding: 0px;
	border-collapse: collapse;
	border: 0px;
	font-size: var(--tiny);
	text-align: center;
}
table.popup_confirm td{
	border:0px solid var(--main_color);
}
table.popup_confirm td.text_right{
	text-align: right;
}
table.popup_confirm td.text_left{
	text-align: left;
}









button.system{
	background-color:var(--main_background);
	font-size:var(--small);
	color:var(--main_color);
	border: 0.2vw solid var(--main_color);
	margin:0;
	padding:0.2vw 0.5vw;
	cursor: pointer;
}
button.system:disabled{
	background-color:var(--main_color);
	font-size:var(--small);
	color:var(--main_background);
	border: 0.2vw solid var(--main_background);
	margin:0;
	padding:0.2vw 0.5vw;
	cursor: default;
}
button.system_small{
	background-color:var(--main_background);
	font-size:var(--tiny);
	color:LightSlateGray;
	border:0.2vw solid LightSlateGray;
	margin:0;
	padding:0.2vw 0.5vw;
	cursor: pointer;
}


div#settings_block{
	position: absolute;
	font-size:var(--normal);
	color:var(--main_color);
	border:0.4vw double var(--gray);
	text-align: center;
	background: linear-gradient(#181a2b 0%,#2a2e4d 15%,80%,#181a2b);
	margin:0;
	padding:0.5vw 1vw;
	border-radius: 2vw;
	z-index: 1001;
}


table.settings{
	vertical-align:top;
	border:0px solid var(--main_color);
	border-collapse: separate;
	border-spacing: 0.2vw;
	color: var(--main_color);
  	margin: 0px;
  	padding: 0px;
}
table.settings td{
	border: 0.0vw solid #333;
	padding: 1vw;
	text-align: center;
	border-radius: 0.5vw;
}
table.settings td.right{
	text-align: right;
}


div.textarea{
	margin: auto;
	padding: 0px;
  	font-size: var(--small);
	color:var(--main_color);
  	background-color:var(--main_background);
	height: 2vw;
	width: 25vw;
	text-align: justify;
	word-break:break-all;
	border: 0.2vw solid var(--main_color);
	overflow: hidden;
	border-radius: 0.5vw;
}



table.settings_confirm{
	width: 80%;
	margin: 0.5vw auto;
	padding: 0px;
	border-collapse: collapse;
	border: 0px;
	font-size: var(--tiny);
	text-align: center;
}
table.settings_confirm td{
	border:0px solid var(--main_color);
}
table.settings_confirm td.text_right{
	text-align: right;
}
table.settings_confirm td.text_left{
	text-align: left;
}



input.lever{
	height: 1vw;
	background: var(--lightteal);
	outline: none;
	opacity: 1;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

input.lever::-webkit-slider-thumb{
	appearance: none;
	border-radius: 0px;
	width: 2vw; /* Set a specific slider handle width */
	height: 2vw; /* Slider handle height */
	background: var(--gray); /* Blue background */
	cursor: pointer; /* Cursor on hover */
}

input.lever::-moz-range-thumb {
	border-radius: 0px;
	width: 2vw; /* Set a specific slider handle width */
	height: 2vw; /* Slider handle height */
	background: var(--gray); /* Blue background */
	cursor: pointer; /* Cursor on hover */
}