body{
  margin:0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow:hidden;
  touch-action: manipulation;
}
h1{margin:10px 8px 0; text-align:center; font-size:28px;}
h1 span{display:block; font-size:0.6em;}

/*play area*/
.wrapper{
  width:100vw;
  height:100vh;
  background: -webkit-linear-gradient(top, hsla(210,70%,80%,1) 0%,hsla(210,50%,100%,1) 100%);
  position:relative;
  cursor:crosshair;
}
.score-panel{
  position:fixed;
  left:50%;
  top:60px;
  transform:translateX(-50%);
  font-size:18px;
  font-weight:bold;
  text-align:center;
}
.score-panel .birds-killed,
.score-panel .score{
  white-space:nowrap;
}

/* base bird styles (movement handled by JS) */
.pajaro{
  position:absolute;
  left:0;
  top:0;
  cursor:crosshair;
  opacity:1;
  transition:opacity 0.2s ease-out;
  /* enlarge clickable area so one tap is enough */
  width:100px;
  height:60px;
  margin-top:-30px;
  margin-left:-50px;
}
.pajaro>span{
  display:none;position:absolute; z-index:2; left:-250%;bottom:-50%;
  background-color:white; border:solid 2px #000; width:80px; height:30px; padding:10px; border-radius:50%;
}
.pajaro>span:before{
  content:"I'm Dead!"; color:red; font-weight:bold;
}

.pajaro1{transform:scale(0.9);}
.pajaro2{transform:scale(0.8);}
.pajaro3{transform:scale(1.4);}
.pajaro4{transform:scale(0.9);}
.pajaro5{transform:scale(0.5);}
.pajaro6{transform:scale(1.4);}


.timer{
  background-color:#333; width:90%; max-width:300px;height:50px;
  position:fixed;
  left:50%;
  top:0;
  transform:translateX(-50%);
}


.timer span{
  display:block;
  background:repeating-linear-gradient(-45deg, #000, rgba(0, 0, 0, 0) 25px, #FFF 25px, #FFF 50px);
  width:100%; height:50px;
  animation:timer 120s linear;
}

.timer span:before{
  content:"TIME LEFT";
  display:block;
  position:absolute; z-index:3;
  left:0;
  right:0;
  top:0;
  bottom:0;
  text-align:center;
  line-height:50px;
  font-size:25px;
  color:red;
}
@keyframes timer{
0%{width:10px;}
100%{width:100%; display:block;}
}


.gameover{
  position:fixed; z-index:100000; left:0; top:0; bottom:0; right:0; background-color:rgba(0,0,0,0.8);
  animation:gameover 120s linear forwards;
  font-size:64px; color:white; font-weight:bold; text-align:center;
  text-indent:0;
  line-height:500px;
}

@keyframes gameover{
0%{left:-5000px;bottom:100%;}
97%{left:-5000px;bottom:100%;}
100%{ left:0px;}
}

@media (max-width: 600px) {
  h1{font-size:22px; margin-top:8px;}
  .score-panel{top:70px; font-size:16px;}
  .gameover{
    font-size:40px;
    line-height:100vh;
  }
}

/* stylized crossbow at bottom center */
.gun{
  position:fixed;
  bottom:10px;
  left:50%;
  width:140px;
  height:90px;
  transform:translateX(-50%) translateY(0);
  pointer-events:none;
}
.gun::before{ /* wide curved bow */
  content:"";
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  width:130px;
  height:22px;
  background:#111;
  border-radius:22px;
  box-shadow:0 0 8px rgba(0,0,0,0.6);
}
.gun::after{ /* grip at bottom */
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:22px;
  background:#111;
  border-radius:6px;
}

.gun-barrel{ /* vertical shaft + arrow */
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:8px;
  height:48px;
  background:#222;
  border-radius:4px;
  box-shadow:0 0 6px rgba(0,0,0,0.7);
}
.gun-barrel::after{ /* arrow tip */
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:12px;
  height:12px;
  background:#222;
  border-radius:2px;
}

/* recoil animation when any bird is hit, driven by JS adding .shoot */
@keyframes gun-shoot{
  0%{transform:translateX(-50%) translateY(0);}
  30%{transform:translateX(-50%) translateY(-8px);}
  100%{transform:translateX(-50%) translateY(0);}
}

.gun.shoot{
  animation:gun-shoot 0.2s ease-out;
}




/*------------------------------------------------------ body of the bird
*/

.pajaro{
  background:black;
  border-radius: 50% 50% 20% 20%;
  color:white;
  line-height:20px;
  letter-spacing: 2px;
  font-size:0.8em;
  text-align:center;
  position:absolute;

  margin-top:-20px; margin-left:-10px;
  width:15px; height:15px;
  animation:planeo 0.8s linear infinite;
  z-index:999;
}

.pajaro:after,
.pajaro:before{
  content:"";
  position:absolute;
  top:50%; left:50%;
}

/*------------------------------------------------------ bird wings
*/

.pajaro:after{
  border-radius: 100% 100% 0 0;
  box-shadow: inset 0px 5px 0 black;
  width:100px; height:100px;
  margin-top:-7px; margin-left:-50px;
  transform-origin: 100% 0%;
  animation:alas 3s linear infinite;
}

/*------------------------------------------------------ bird beak
*/

.pajaro:before{
  background:#FFC37F;
  border-radius: 100% 0% 20% 0%;
  margin-top:3px; margin-left:-4px;
  width:6px; height:6px;
  transform:rotateZ(45deg);
}

/*------------------------------------------------------ wings animation
*/

@keyframes alas {
  50%{
    transform:rotateX(-1440deg);
  }
}

/*------------------------------------------------------ bird animation
*/

@keyframes planeo {
  40%{
    transform:rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
    line-height:16px;
    font-size:0.6em;
  }
  80%{
    transform:rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
  }
}