/*** INSTRUCTIONS SCREEN ***/

@font-face {
  font-family: Chiller;
  font-style: normal;
  font-weight: 400;
  src:url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/chiller.eot')                  format('embedded-opentype'),
      url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/chiller.woff')                 format('woff'),
      url('/wp-content/themes/beckyb/partials/embed/ghosts/lib//wp-content/themes/beckyb/partials/embed/ghosts/lib/chiller.eot')           format('embedded-opentype'),
      url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/chiller.ttf')                  format('truetype');
}

.ghost-leaderboard {
  margin-bottom: 4em;
}

.ghost-leaderboard table {
  width: 100%;
  table-layout: fixed;
}

.ghost-leaderboard td {
  color: #fff;
  padding: .5em 1em;
  width: 42%;
}

.ghost-leaderboard td:first-child {
  width: 16%
}
.ghost-leaderboard td:last-child {
  text-align: right;
}

.ghost-leaderboard tr:nth-child(odd) {
  background-color: #333;
}

.ghost-submitscore {
  margin: 2em 0;
}
.ghost-submitscore input {
  font-size: 1em;
  padding: .5em;
  border: 0;
}
.ghost-submitscore button {
  font-size: 1em;
  padding: .5em 1em;
  border: 0;
  background-color: #555050;
  color: #fff;
  border-radius: .25em;
}

.instructions-container,
.over-screen {
  position: fixed;
  overflow: scroll;
  height: 100%;
  width:  100%;
  top: 0;
  z-index: 100003;
  background-color: rgba(0,0,0,.9);
  color: #EEE;
  margin: auto;
}

.instructions-container h1, .over-screen h1 {
  color: #F5A01A;
  font-family: Chiller;
  margin-top: 10px;
}

.over-screen p {
  margin: 2em auto;
  max-width: 300px;
}

.instructions-container .instructions-box {
  padding: 15px;
  background: rgba(0,0,0,.6);
}

.instructions-container .instructions-text {
  text-align: center;
}

.instructions-container .instructions-text h1 {
  text-align: center;
  font-size: 60px;
  margin-bottom: 0;
  line-height: 1;
}

.instructions-container .ghost-lineup {
  padding: 20px 0;
}

.instructions-container .ghost.inline {
  position: static;
}

.instructions-container .flee-button,
.instructions-container .lets-do-this-button {
  width: 100%;
}
.instructions-container .flee-button,
.instructions-container .lets-do-this-button,
.over-screen .flee,
.over-screen .again {
  padding: .75em;
  border: 0;
  color: #fff;
  font-weight: bold;
}

.over-screen .again,
.instructions-container .lets-do-this-button {
  background-color: #537eff;
}

.over-screen .flee,
.instructions-container .flee-button {
  /* background-color: red; */
  background-color: #d30c0c;
}


.instructions-container .row {
  margin-left: 0;
  margin-right: 0;
}

.instructions-sub-text {
  margin-top: 15px;
  text-align: center;
}

.over-screen-content {
  text-align: center;
  margin: auto;
  float: none;
}

.over-screen h1 {
  font-size: 80px;
  line-height: 80px;
}

.over-screen h2 {
  font-size: 40px;
  color: #EEE;
  font-family: Chiller;
}

.over-screen h2 .score {
  color: #F5A01A;
}

/*** UI ELEMENTS ***/
.ghost-cover {
  position: fixed;
  z-index: 99999;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/site.cur'),
    url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/site.png') 16 16, crosshair;
}

.ghost-hud {
  height: 80px;
  width: 100%;
  background-color: #000;
  position: fixed;
  bottom: 0;
  font-family: Chiller;
  color: #F5A01A;
  font-size: 50px;
  line-height: 50px;
  padding: 15px;
}

.ghost-lives {
  margin-right: 30px;
}

.ghost-life {
  width: 32px;
  height: 32px;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/heart.png');
  margin-right: 20px;
  margin-top: 6px;
  float: left;
}

.ghost-score, .ghost-level {
  width: 160px;
  float: right;
  text-align: right;
  padding-right: 30px;
}

.ghost-score.positive {
  color: #33E;
}

.ghost-score.negative {
  color: #E33;
}

.bullet-hole {
  width: 50px;
  height: 47px;
  position: fixed;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/bullet-hole.png')
}

.ghost-exit-btn {
  color: #F5A01A;
  float: right;
  font-size: 50px;
  cursor: pointer;
}

/*** GHOSTS ***/

.ghost {
  position: fixed;
  width: 80px;
  height: 80px;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/ghost-1.png');
  z-index: 100000;
  opacity: 0.7
}

.ghost.angry {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/ghost-1-angry.png');
}

.ghost.santa {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/ghost-1-santa.png');
}

.ghost.duckbaby {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/duckbaby.png');
}

.ghost.slimer {
  position: fixed;
  width: 80px;
  height: 80px;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/slimer.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 100000;
  opacity: 0.7;
}

.ghost.beetlejuice {
  width: 100px;
  height: 100px;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/beetlejuice.gif');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

.ghost.beetlejuice.spiders {
  background-image: none;
}

.ghost.beetlejuice.spiders img {
  width: 100px;
  height: 100px;
}

.ghost.covid {
  width: 100px;
  height: 100px;
}

.ghost.michael-jackson {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/michael.png');
}

.ghost.michael-buble {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/michael-buble.png');
}

.ghost.angel {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/ghost-1-halo.png');
}

.ghost.evil {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/ghost-1-evil.png');
}

.ghost.angry.slimer {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/slimer-angry.png');
}

.ghost.reaper {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/ghost-reaper.png');
  background-repeat: no-repeat;
}

.ghost.covid {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/covid.png');
}

.ghost.david-s-pumpkins {
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/david-s-pumpkins.png');
  background-repeat: no-repeat;
}

.ghost.move-right {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

/*** SPRITES ***/

.ghost.slime-1, .ghost.slimer.slime-1 {
  background-position: 0 0;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/slime.png');
  z-index: -1;
}
.ghost.covid.slime {
  background-position: 0 0;
  background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/covid-slime.png');
  z-index: -1;
  background-repeat: no-repeat;
}

.ghost.spiders-state-1 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-1.png'); }
.ghost.spiders-state-2 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-2.png'); }
.ghost.spiders-state-3 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-3.png'); }
.ghost.spiders-state-4 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-1.gif'); }
.ghost.spiders-state-5 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-2.gif'); }
.ghost.spiders-state-6 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-3.gif'); }
.ghost.spiders-state-7 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-4.gif'); }
.ghost.spiders-state-8 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-5.gif'); }
.ghost.spiders-state-9 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-6.gif'); }
.ghost.spiders-state-10 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-7.gif'); }
.ghost.spiders-state-11 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-8.gif'); }
.ghost.spiders-state-12 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-9.gif'); }
.ghost.spiders-state-13 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-10.gif'); }
.ghost.spiders-state-14 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/spiders-11.gif'); }

.ghost.poof-state-1 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-1.png'); }
.ghost.poof-state-2 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-2.png'); }
.ghost.poof-state-3 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-3.png'); }
.ghost.poof-state-4 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/poof-4.png'); }

.ghost.black-poof-state-1 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/black-poof.png'); }
.ghost.black-poof-state-2 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/black-poof.png'); background-position: 0 -80px; }
.ghost.black-poof-state-3 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/black-poof.png'); background-position: 0 -160px; }
.ghost.black-poof-state-4 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/black-poof.png'); background-position: 0 -240px; }

.ghost.red-poof-state-1 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/red-poof-1.png'); }
.ghost.red-poof-state-2 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/red-poof-2.png'); }
.ghost.red-poof-state-3 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/red-poof-3.png'); }
.ghost.red-poof-state-4 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/red-poof-4.png'); }

.ghost.lightning-1, .ghost.slimer.lightning-1 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/lightning-1.png') }
.ghost.lightning-2, .ghost.slimer.lightning-2 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/lightning-2.png') }
.ghost.lightning-3, .ghost.slimer.lightning-3 { background-image: url('/wp-content/themes/beckyb/partials/embed/ghosts/lib/res/lightning-3.png') }



@media (max-width: 620px) {
  .ghost-hud {
    font-size: 15px;
    line-height: 15px;
  }
  .ghost-lives {
    float: left
  }
  .ghost-score {
    font-size: 30px;
    line-height: 60px;
    width: 90px;
  }
  .ghost-level {
    display: none;
  }
  .ghost-exit-btn {
    line-height: 50px;
  }
}