*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  overflow:hidden;
  font-family:Arial;
}

#gameArea{

  width:100vw;
  height:100vh;

  position:relative;

  overflow:hidden;

  background:url("assets/pc.png");
  background-size:cover;
  background-position:center;

  cursor:none;

}

@media(max-width:768px){

  #gameArea{

    background:url("assets/cel.png");
    background-size:cover;
    background-position:center;

  }

}

.hud{

  position:absolute;

  top:15px;
  left:15px;

  display:flex;

  flex-direction:column;

  gap:8px;

  z-index:999;

}

.hud div{

  background:rgba(0,0,0,.6);

  color:white;

  padding:8px 12px;

  border-radius:10px;

  font-size:15px;

  font-weight:bold;

}

#crosshair{

  width:60px;
  height:60px;

  border:3px solid white;

  border-radius:50%;

  position:absolute;

  transform:translate(-50%,-50%);

  pointer-events:none;

  z-index:9999;

}

#crosshair::before{

  content:'';

  width:3px;
  height:100%;

  background:white;

  position:absolute;

  left:50%;

  transform:translateX(-50%);

}

#crosshair::after{

  content:'';

  width:100%;
  height:3px;

  background:white;

  position:absolute;

  top:50%;

  transform:translateY(-50%);

}

#gun{

  position:absolute;

  bottom:-40px;
  right:-20px;

  width:420px;

  z-index:9998;

  pointer-events:none;

  transform-origin:
  bottom right;

  transition:
  transform .05s;

}

.target{

  position:absolute;

  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  cursor:pointer;

}

#startScreen,
#gameOver{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.75);

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:20px;

  color:white;

  z-index:10000;

}

.hidden{

  display:none !important;

}

#startImage,
#loseImage{

  width:min(90vw,500px);

}

button{

  padding:15px 30px;

  border:none;

  border-radius:10px;

  font-size:20px;

  background:#ffcc00;

  cursor:pointer;

  font-weight:bold;

}

.finalText{

  font-size:28px;

  font-weight:bold;

}

form{

  display:flex;

  flex-direction:column;

  gap:10px;

  width:300px;

}

input{

  padding:14px;

  border:none;

  border-radius:10px;

  font-size:16px;

}

.explosion{

  position:absolute;

  width:100px;
  height:100px;

  border-radius:50%;

  background:white;

  animation:boom .3s forwards;

  pointer-events:none;

}

@keyframes boom{

  from{

    transform:scale(.2);

    opacity:1;

  }

  to{

    transform:scale(2);

    opacity:0;

  }

}

@media(max-width:768px){

  #gun{

    width:230px;

    bottom:-10px;
    right:-10px;

  }

  #crosshair{

    width:45px;
    height:45px;

  }

}