/**
 * @file
 * Styles of the easter egg game.
 *
 * The images are backgrounds, so they are only downloaded once the game is
 * opened. The game coordinates in js/easter-egg.js are based on the 500x300
 * board.
 */

.easter-egg {
  position: fixed;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0, 0.9);
  inset: 0;
}

.easter-egg__board {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 500px;
  height: 300px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  background: url('../data/bg.jpg') 0 -20px repeat-x;
}

.easter-egg__board:focus {
  outline: none;
}

.easter-egg__floor {
  position: absolute;
  z-index: 4;
  top: 242px;
  left: 0;
  width: 100%;
  height: 58px;
  background: url('../data/floor.jpg') repeat-x;
}

.easter-egg__bird {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 50px;
  height: 40px;
  background: url('../data/bird.gif') center / contain no-repeat;
}

.easter-egg__bird.is-dead {
  transition: transform 1s ease-in;
  background-image: url('../data/bird.png');
}

.easter-egg__pipes {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
}

.easter-egg__pipe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 420px;
  background: url('../data/bamboo.png') 0 0 / 100% 100% no-repeat;
}

.easter-egg__start {
  position: absolute;
  z-index: 100;
  top: 75px;
  left: 205px;
  width: 93px;
  height: 97px;
  background: url('../data/startscreen.png') no-repeat;
}

.easter-egg__score {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 16px;
  transition: all 1s ease;
  color: red;
  font-size: 16px;
  font-weight: 900;
}

.easter-egg__score.is-final {
  right: 50%;
  transform: translateX(50%);
  font-size: 35px;
}