@font-face {
	font-family: Glyphicons;
	src: url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/fonts/glyphicons-halflings-regular.woff2);
}
@font-face {
	font-family: agar;
	src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyNPYZvgw.woff2);
}
body{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing: border-box;padding:0;margin:0;touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select: none;user-select: none}
#sel{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 15px;
	background: white;
	border-radius: 15px;
	width: 400px;
	max-height: 100%;
	overflow: auto;
	position: absolute;
	left: calc(50% - 200px);
	top: 50%;
	transform: translateY(-50%);
	padding: 15px;
}
::placeholder{
	color: inherit;
	opacity: 0.6;
}
h1{
	font-size: 30px;
	font-weight: 500;
}
#title{
	padding: 10px;
}
input[type=checkbox]{
	height: unset !important;
	box-shadow: none !important;
}
#sel input, #sel btn{
	display: inline-block;
	flex: 1;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px #0002;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	outline: none;
	min-width: 0;
}
#sel btn{
	background-color: var(--a);
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	color: white;
	border: 1px solid var(--b);
	box-shadow: none;
}
#sel btn:hover{
	background-color: var(--c);
  border-color: var(--d);
}
#sel btn:active{
	background-color: var(--d);
	border-color: var(--c);
}
#play{
	--a: #337ab7;
	--b: #2e6da4;
	--c: #286090;
	--d: #204d74;
}
#spec{
	--a: #f0ad4e;
	--b: #eea236;
	--c: #ec971f;
	--d: #d58512;
}
#sel #pref{
	flex: 0 0 48px;
	--a: #5bc0de;
	--b: #46b8da;
	--c: #31b0d5;
	--d: #269abc;
	font-family: Glyphicons;
}
#sel input:focus{
	border-color: #66afe9;
  box-shadow: inset 0 1px 1px #0002, 0 0 8px #6ae9;
}
#sel .btns{
	display: flex;
	gap: 6px;
}
#help, #info{
	width: 100%;
	text-align: center;
	color: #777;
	font-size: 14px;
}
a{color: #666}
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 5;
	background: #00000080;
	transition: opacity .3s;
	width: 100%;
	opacity: 1;
}
#overlay.hidden{
	opacity: 0;
	z-index: -1;
	transition: opacity .3s, z-index 0s .32s;
}
body, html{
	background: #f2fbff;
	overflow: hidden;
}

#sel.pref .pref{
	display: block;
}
#sel .pref{
	display: none;
}
#sel.pref #help{
	display: none;
}
hr{
	border: 0;
	border-top: 1px solid #eee;
}

#sel .pref input[type=checkbox]{
	margin-left: 5px;
	margin-right: 2px;
	padding: 0;
	cursor: pointer;
}
#arena{
	z-index: 0;
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-image: url(./grid.png);
	font-family: agar;
}
#arena.dark{
	background-image: url(./darkgrid.png);
}

#arena .cell-2{
	display: flex;
	justify-content: center;
	align-items: center;
	background-clip: content-box, border-box !important;
	text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
	color: #fff;
	text-align: center;
	font-size: max(15px, calc(var(--w) / 5));
	white-space: nowrap;
}
#arena .cell-2::after{
	content: attr(mass);
	display: block;
	position: absolute;
	top: calc(50% + 1em);
	font-size: .5em;
}
#arena .cell-2, .cell-3, .cell-1{
	border: 8px #00000015 solid;
}

#leaderboard, #myscore, #minimap, #chat{
	z-index: 2;
	position: absolute;
	background: #0005;
	font-size: 16px;
	color: white;
	font-family: agar;
}
#leaderboard{
	top: 2px;
	right: 2px;
	padding: 10px;
	font-size: 25px;
	color: white;
	width: 200px;
	text-align: center;
	transform-origin: top right;
	z-index: 1;
}
#myscore{
	top: 2px;
	left: 2px;
	background: #0005;
	height: 1.2em;
}
#myscore div{
	color: #888;
	font-size: 0.8em;
}
#myscore div:first-child{
	color: #fff;
	font-size: 1em;
}
#minimap{
	bottom: 2px;
	right: 2px;
	width: 200px;
	height: 200px;
	overflow: hidden;
}
#leaderboard div{
	font-size: 16px;
	text-align: left;
	margin-top: 8px;
	line-height: 80%;
}
#leaderboard div.red{
	color: #faa;
}
minicell{
	position: absolute;
	border-radius: 100%;
}
#arena circle{
	stroke-width: 5px;
}
#pause{
	font-family: Glyphicons;
	line-height: 17px;
	padding: 0 3px;
	position: absolute;
	color: #0005;
}
#touchsplit, #toucheject{
	--a: calc(10vmin + 60px); z-index: 2;
	width: var(--a); height: var(--a);
	border-radius: 50%; background: #0002;
	position: absolute; bottom: calc(var(--a) / 4); right: calc(var(--a) * 1.1);
	border: #0001 4px solid;
	color: white; text-align: center;
	line-height: calc(var(--a) - 8px);
	font-size: calc(var(--a) / 2.4); font-family: Glyphicons;
	display: none;
}
#touchsplit{
	bottom: calc(var(--a) * 1.3);
	right: calc(var(--a) / 2.4);
	transform: rotate(60deg);
	font-family: agar;
	font-size: calc(var(--a) / 1.2);
	line-height: 90%;
}
@media (pointer: coarse) {
	#minimap{ transform: scale(0.5); transform-origin: bottom right; }
	#touchsplit, #toucheject{ display: block; }
}

#leaderboard.teams div{
	display: none;
}
#leaderboard.teams div:first-child{
	display: block;
	width: 150px;
	height: 150px;
	margin: 15px;
	border-radius: 75px;
	font-size: 0;
}

@media (max-height: 540px){ #leaderboard{ transform: scale(0.8) } }
@media (max-height: 370px){ #leaderboard{ transform: scale(0.63) } }
@media (max-height: 335px){ #leaderboard{ transform: scale(0.5) } }
@media (max-height: 418px){
	#leaderboard.teams{ transform: scale(0.5) }
	#leaderboard.teams div:first-child{
		margin: 6px 30px;
		width: 120px;
		height: 120px;
	}
}

#chat{
	bottom: 2px;
	left: 2px;
	padding: 3px;
	background: none;
	display: flex;
	flex-direction: column-reverse;
	color: #000;
	width: 240px;
}
#chat input{
	border: none;
	outline: none;
	font-size: 16px;
	background: none;
	font-family: agar;
	padding: 4px;
	background: #0004;
	margin-top: 5px;
	color: unset;
}
#chat input::placeholder{ color: inherit; opacity: 0.5 }
.dark ~ #chat{color: #fff}
#chat div:before{
	content: "[" attr(mname) "] ";
	color: var(--col);
}
#chat{opacity: 0.5}
#chat div{
	word-break: break-word;
	opacity: 1;
	transition: opacity 3s 7s;
}
#chat:focus-within, #chat:focus-within div{opacity: 1 !important; transition: none}