/* taken from the original page at bfdi.tv/5b */
* {
	font-family: Helvetica, Arial, sans-serif;
	text-align: center;
	color:#666;
	margin:0;
	padding:0;
}
a{
	color: black;
	-webkit-transition: 0.5s ease;  
	-moz-transition: 0.5s ease;  
	-o-transition: 0.5s ease;  
	transition: 0.5s ease;
}
a:hover{
	color: #666;
	-webkit-transition: 0.2s ease;  
	-moz-transition: 0.2s ease;  
	-o-transition: 0.2s ease;  
	transition: 0.2s ease;
}
html{
	background-color:white;
	height:100%;
}
body{
	height:100%;
	width:960px;
	margin:0 auto 0 auto;
	min-height:600px;
	position:relative;
}
p{
	margin:0 0 0.7em;
}
#center{
	position:absolute;
	top:40%;
	margin-top:-255px;
}
/* https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable */
.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#hide-contenteditable {
	width: 960px;
	height: 540px;
	overflow: hidden;
	margin-bottom: 10px;
}

.crisp-edges {
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}
.btn {
	width: 200px;
	height: 100px;
	font-size: 30px;
	color: #000000;
	background-color: white;
	border: 5px solid #000000
}
.top-left {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 999;
	width: 200px;
	height: 100px;
	font-size: 30px;
	color: #000000;
	background-color: white;
	border: 5px solid #000000
}

.top-left-reset {
	position: fixed;
	top: 150px;
	left: 10px;
	z-index: 999;
	width: 200px;
	height: 100px;
	font-size: 30px;
	color: #000000;
	background-color: white;
	border: 5px solid #000000
}

.top-right {
  position: fixed;
  top: 10px;
  right: 10px;
  font-family: monospace;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;

  /* ADD THESE LINES */
  width: 140px;           /* Fixed width prevents "shaking" when numbers change */
  height: 30px;          /* Fixed height */
  overflow: hidden;      /* Keeps the box rigid */
  display: block;        /* Ensures it behaves as a container */
  z-index: 9999;         /* Keeps it above the game canvas */
  pointer-events: none;  /* Prevents the box from eating mouse clicks */
  contain: strict;       /* IMPORTANT: Tells browser this box won't affect game layout */
}

.hidden {
  display: none;
}