.blur {
  filter: blur(5px);
  pointer-events: none;
}
#page-locked-message {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 560px;
  max-height: 100%;
  z-index: 1000;
  background-color: #333;
  padding: 30px;
  display: none;
}
#history {
  font-size: 20px;
  float: right;
  margin-top: 5px;
}
#history i {
  display: inline-block;
  vertical-align: middle;
  margin-top: -4px;
  margin-left: -4px;
}
.button {
  cursor: pointer;
}
#make-new-game {
  padding: 10px 15px;
  background-color: #0cf;
  display: inline-block;
  color: #333;
}
#make-new-game i {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
}

#games {
}
#games > div > div {
  display: inline-block;
}

.game > div, .col-names > div {
  display: inline-block;
  vertical-align: middle;
}
.col-names {
  margin-bottom: 3px;
  padding-bottom: 3px;
}
.col-names > div {
  font-weight: bold;
  color: #888;
}

.game.ready {
  background-color: #364;
}
.game.queued {
  background-color: #444;
}
.game.playing {
  background-color: #346;
}

.game .code-score,
.game .enemy-score,
.col-names .code-score,
.col-names .enemy-score {
  text-align:center;
  width: 45px;
  font-family: monospace;
  background-color: #333;
  padding: 0px 2px;
  color: #aac;
  font-size: small;
  margin: 0px 0px;
}

.game.done > div {
  color: #888;
}

.game .date, .col-names .date {
  padding-left: 10px;
  min-width: 115px;
  color: #888;
}
.game .name, .col-names .name {
  min-width: 200px;
}
.game .vs, .col-names .vs {
  text-align: center;
  font-style: italic;
  min-width: 15px;
}
.game .codebot, .col-names .codebot,
.game .enemy, .col-names .enemy {
  text-align: center;
  width: 220px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 21px;
  margin-bottom: -1px;
}
.game .codebot, .col-names .codebot {
  text-align: right;
}
.game .enemy, .col-names .enemy {
  text-align: left;
}
.game .map, .col-names .map {
  width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: small;
}
.game .status, .col-names .status {
  margin-left: 10px;
  min-width: 65px;
}

.game .status.ready {
  color: yellow;
}
.game .status.queued {
  color: #BA55D3;
}
.game .status.playing {
  color: #88aaff;
}
.game .status.victory {
  color: #00ff00;
}
.game .status.defeat {
  color: #ff4444;
}

.game .play-btn i,
.game .replay-btn i {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin-bottom: 2px;
}
.game .replay-btn a {
  color: #888;
}