#startBtn {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%  );
  color: #333;
  font-size: 15px;
  padding: 4px 9px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.15);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  float:right;
  margin-top:-3px;
}

#startBtn:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.33);
}

#startBtn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

#startBtn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,120,255,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
}
	
.colorfill-dropdown {
  border-color: #aaa;
  padding: 2px;
  margin-right:10px;
  background:#eee;
  border-radius:2px;
}
	
#game-info {
  margin-top:10px;
}
	
#gameBorder {
  margin-right:2em; font-size:14px; background-color:#ccc; color:#666;
}

#gameDescription {text-align:left}	
	
@media (max-width: 509px) {
  #gameFrame, .gameFrame {margin: 20px auto; text-align:center;}
  #gameBorder, .gameBorder {margin:0 auto 2em auto; float:none; border: 3px solid #e5e5e5; display:inline-block; text-align:left;}
  .mobile-hide {display:none}
  #gameDescription {padding-left:14px; padding-top:0}	
  .colorfill-win-table-grid-size {display:none;}
  #colorfill-win-table tr:nth-child(4), #colorfill-win-table tr:nth-child(5), #colorfill-win-table tr:nth-child(6) {display:none;}	
}	
	
#game:hover {
  cursor: crosshair;
}	
	
.colorfill-lost, .colorfill-won {
  float:right;
}

.colorfill-lost {
  color: #888;
  font-size: 90%;
  font-style: italic;
}

.colorfill-won {
  font-weight:bold;
  color:yellow;
  animation:colorfill-win-anim linear infinite 1s;
  text-shadow:1px 1px 2px black;
}
	
@keyframes colorfill-win-anim {
  0, 100% {color:yellow}
  33% {color:white}
  66% {color:#ddddff}
}
	
  #colorfill-win-table {border:1px solid #333; box-shadow:1px 1px 2px #111; background:#1f1f1f; border-spacing:3px; border-radius:3px; margin-bottom:1px}
  #colorfill-win-table td {padding:2px 4px; text-align:center;}
  .colorfill-win-table-slot {color:#444; width:40px}
  .colorfill-win-table-grid-size {font-size:90%; }
  .colorfill-win-table-won, .colorfill-win-table-won-90, .colorfill-win-table-won-80, .colorfill-win-table-won-awesome {color:yellow; background:#333; border-radius:3px}
 /* .colorfill-win-table-won:after {content: '☆'; font-size:75%; display: block; float: right; margin: 0 6px 0 -8px; color:#999} */
  .colorfill-win-table-won-90:after {content: '☆'; font-size:75%; display: block; float: right; margin: 0 6px 0 -8px; opacity:0.5}
  .colorfill-win-table-won-80:after {content: '☆'; font-size:90%; display: block; float: right; margin: 0 4px 0 -6px;}
  .colorfill-win-table-won-awesome:after {content: '★'; display: block; float: right; margin: 0 4px 0 -5px; animation:glow linear 1.5s infinite}
  .colorfill-win-table-lost {color:orangered; background:#181818; font-size:90%; font-style:italic; border-radius:3px}
  .color-win-table-color-th {font-size:70%; padding:4px 0 !important; vertical-align:bottom; line-height:8px; color:#444; border-bottom:1px dashed #333}
  .colorfill-win-table-colors td {padding-top:0 !important; font-size:90%}
	
.colorfill-win-table-updated {
  animation: colorfill-pop 0.35s ease-out;
}

small {font-size:80%; color:#666}

@keyframes glow {
  0% {}
  50% {color:white; text-shadow: 0 0 8px white;}
  100% {}
}

@keyframes colorfill-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}