/* 
  Animacoes e Sprites
*/

   /* Fundo */
   @-webkit-keyframes animLand {
      0% { background-position: 0px 0px; }
      100% { background-position: -335px 0px; }
   }
   @-moz-keyframes animLand {
      0% { background-position: 0px 0px; }
      100% { background-position: -335px 0px; }
   }
   @-o-keyframes animLand {
      0% { background-position: 0px 0px; }
      100% { background-position: -335px 0px; }
   }
   @keyframes animLand {
      0% { background-position: 0px 0px; }
      100% { background-position: -335px 0px; }
   }

   /* Ceu */
   @-webkit-keyframes animSky {
      0% { background-position: 0px 100%; }
      100% { background-position: -275px 100%; }
   }
   @-moz-keyframes animSky {
      0% { background-position: 0px 100%; }
      100% { background-position: -275px 100%; }
   }
   @-o-keyframes animSky {
      0% { background-position: 0px 100%; }
      100% { background-position: -275px 100%; }
   }
   @keyframes animSky {
      0% { background-position: 0px 100%; }
      100% { background-position: -275px 100%; }
   }

   /* Passaro */
   @-webkit-keyframes animBird {
      from { background-position: 0px 0px; }
      to { background-position: 0px -96px; }
   }
   @-moz-keyframes animBird {
      from { background-position: 0px 0px; }
      to { background-position: 0px -96px; }
   }
   @-o-keyframes animBird {
      from { background-position: 0px 0px; }
      to { background-position: 0px -96px; }
   }
   @keyframes animBird {
      from { background-position: 0px 0px; }
      to { background-position: 0px -96px; }
   }

   /* Canos */
   @-webkit-keyframes animPipe {
      0% { left: 1300px; } /* 900px */
      100% { left: -100px; }
   }
   @-moz-keyframes animPipe {
      0% { left: 1300px; }
      100% { left: -100px; }
   }
   @-o-keyframes animPipe {
      0% { left: 1300px; }
      100% { left: -100px; }
   }
   @keyframes animPipe {
      0% { left: 1300px; }
      100% { left: -100px; }
   }

   /* Muro */
   @-webkit-keyframes animCeiling {
      0% { background-position: 0px 0px; }
      100% { background-position: -63px 0px; }
   }
   @-moz-keyframes animCeiling {
      0% { background-position: 0px 0px; }
      100% { background-position: -63px 0px; }
   }
   @-o-keyframes animCeiling {
      0% { background-position: 0px 0px; }
      100% { background-position: -63px 0px; }
   }
   @keyframes animCeiling {
      0% { background-position: 0px 0px; }
      100% { background-position: -63px 0px; }
   }

/* 
  CONFIGURAÇÕES DO JOGO 
*/

   html,
   body
   {
      height: 100%;
      overflow: hidden;
      font-family: monospace;
      font-size: 12px;
      color: #fff;
   }

   /* Corpo Principal do Jogo */
   #main-game
   {
      position: relative;
      max-width: 1500px;
      height: 100%;
      min-height: 525px;
   }

   /* Ecra do Jogo */
   #screen-game
   {
      position: absolute;
      width: 100%;
      height: 100%;
   }

/* 
  ÁREAS DO JOGO
*/

   /* Fundo do Jogo */
   #background-game
   {
      position: absolute;
      top: 0;
      width: 100%;
      height: 80%;
      background-image: url("../assets/sky.png");
      background-repeat: repeat-x;
      background-position: 0px 100%;
      /* background-color: #4ec0ca;   */    
      -webkit-animation: animSky 2s linear infinite;
      animation: animSky 2s linear infinite;
   }

   /* Área do voo */
   #flyarea-game
   {
      position: absolute;
      bottom: 0;
      height: 420px;
      width: 100%;
   }

   /* Tijolos */
   #ceiling
   {
      position: absolute;
      top: -16px;
      height: 16px;
      width: 100%;
      background-image: url("../assets/ceiling.png");
      background-repeat: repeat-x;      
      -webkit-animation: animCeiling 350ms linear infinite;
      animation: animCeiling 350ms linear infinite;
   }

   /* Rodape do Cenario */
   #footer-game
   {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20%;
      background-image: url("../assets/land.png");
      background-repeat: repeat-x;
      background-position: 0px 0px;
      background-color: #ded895;      
      -webkit-animation: animLand 1816ms linear infinite;
      animation: animLand 1816ms linear infinite;
   }

   /* Score Big */
   #bigscore
   {
      position: absolute;
      top: 20px;
      left: 671px;
      z-index: 100;
   }

   #bigscore img
   {
      display: inline-block;
      padding: 1px;
   }

   /* Ecra Inicial com Splash */
   #splash
   {
      position: absolute;
      opacity: 0;
      top: 75px;
      left: 590px;
      width: 188px;
      height: 170px;
      background-image: url('../assets/splash.png');
      background-repeat: no-repeat;
   }

   /* Ecra de Pontos obtidos */
   #scoreboard
   {
      position: absolute;
      display: none;
      opacity: 0;
      top: 64px;
      left: 565px;
      width: 236px;
      height: 280px;
      background-image: url('../assets/scoreboard.png');
      background-repeat: no-repeat;   
      z-index: 1000;
   }

   /* Medalhas */
   #medal
   {
      position: absolute;
      opacity: 0;
      top: 114px;
      left: 32px;
      width: 44px;
      height: 44px;
   }

   /* Pontos obtidos */
   #currentscore
   {
      position: absolute;
      top: 105px;
      left: 107px;
      width: 104px;
      height: 14px;
      text-align: right;
   }

   #currentscore img
   {
      padding-left: 2px;
   }

   /* A maior pontuação já feita em jogos anteriores */
   #highscore
   {
      position: absolute;
      top: 147px;
      left: 107px;
      width: 104px;
      height: 14px;
      text-align: right;
   }

   #highscore img
   {
      padding-left: 2px;
   }

   /* Ecra de Restart */
   #replay
   {
      position: absolute;
      opacity: 0;
      top: 205px;
      left: 61px;
      height: 115px;
      width: 70px;
      cursor: pointer;
   }

   /* Hack para as bordas dos sprites */
   .boundingbox
   {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border: 1px solid red;
   }

   /* Posição inicial do passro e respectivas configurações */
   #player
   {
      left: 60px;
      top: 200px;
   }

   /* Configurações do sprite do bird */
   .bird
   {
      position: absolute;
      width: 34px;
      height: 24px;
      background-image: url('../assets/bird.png');   
      -webkit-animation: animBird 300ms steps(4) infinite;
      animation: animBird 300ms steps(4) infinite;
   }

   /* Posição e animação dos canos e respectivas configurações */
   .pipe
   {
      position: absolute;
      left: -100px;
      width: 52px;
      height: 100%;
      z-index: 10;   
      -webkit-animation: animPipe 7500ms linear;
      animation: animPipe 7500ms linear;
   }

   /* Cano superior e respectivas configurações */
   .pipe_upper
   {
      position: absolute;
      top: 0;
      width: 52px;
      background-image: url('../assets/pipe.png');
      background-repeat: repeat-y;
      background-position: center;
   }

   /* Ponta do cano superior e respectivas configurações*/
   .pipe_upper:after
   {
      content: "";
      position: absolute;
      bottom: 0;
      width: 52px;
      height: 26px;
      background-image: url('../assets/pipe-down.png');
   }

   /* Cano da base e respectivas configurações */
   .pipe_lower
   {
      position: absolute;
      bottom: 0;
      width: 52px;
      background-image: url('../assets/pipe.png');
      background-repeat: repeat-y;
      background-position: center;
   }

   /* Ponta do cano inferior e respectivas configurações */
   .pipe_lower:after
   {
      content: "";
      position: absolute;
      top: 0;
      width: 52px;
      height: 26px;
      background-image: url('../assets/pipe-up.png');
   }