*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

body{
  overflow:hidden;
  font-family:Arial, sans-serif;
}

#game{
  width:100vw;
  height:100vh;
  background: linear-gradient(#87CEEB, #dff7ff);
  position:relative;
  overflow:hidden;
}

#player{
  position:absolute;
  width:80px;
  height:80px;
  left:25%;
  top:200px;
  z-index:10;
}

#player img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid white;
}

.pipe{
  position:absolute;
  width:70px;
  background:#2ecc71;
  right:-70px;
}

.pipe.top{
  top:0;
}

.pipe.bottom{
  bottom:0;
}

#score{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:35px;
  color:white;
  font-weight:bold;
  z-index:20;
}

#gameOver{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:100;
}

#gameOver h2{
  color:white;
  margin-bottom:20px;
}

#gameOver button{
  padding:12px 20px;
  border:none;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
}

@media(max-width:768px){
  #player{
    width:80px;
    height:80px;
  }

  .pipe{
    width:60px;
  }
}